ui icon indicating copy to clipboard operation
ui copied to clipboard

Published 20 hours ago • verified publisher icon shadcn-ui

Transparent Tooltip background

Open polooner opened this issue 4 months ago • 0 comments

My tooltip has a transparent background. I don't know how to fix it? Every other component works as desired.

Here's my code:

import {
  Tooltip,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { TooltipContent } from '@radix-ui/react-tooltip';
import { Word } from '@/lib/contexts/experimentalContext';
import clsx from 'clsx';

type WordWithTooltipProps = {
  word: Word;
  wordIndex: number;
  sentenceIndex: number;
};

export const WordWithTooltip: React.FC<WordWithTooltipProps> = ({
  word,
  wordIndex,
  sentenceIndex,
}) => {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <div
          key={wordIndex}
          data-sentence-index={sentenceIndex}
          data-word-index={wordIndex}
          className={clsx(
            'hover:bg-stone-700  hover:text-white text-slate-500 word-timecode relative  whitespace-pre-wrap inline-block leading-5',
            { 'bg-stone-500 text-white': word.selected }
          )}
        >
          {' ' + word.word}
        </div>
      </TooltipTrigger>
      <TooltipContent>
        {(Math.round(word.start * 10) / 10).toFixed(1) +
          '-' +
          (Math.round(word.end * 10) / 10).toFixed(1)}
      </TooltipContent>
    </Tooltip>
  );
};

Using it like this:

<div
            style={{
              position: 'absolute',
              top: '0px',
              left: '0px',
              width: '100%',
              transform: 'translateY(0px)',
            }}
            ref={paragraphRef}
          >
            {transcript.map((sentence, sentenceIndex) => {
              return (
                <div
                  className='py-2'
                  key={sentenceIndex}
                  style={{ direction: 'ltr' }}
                >
                  {sentence.words.map((word, wordIndex) => {
                    return (
                      <WordWithTooltip
                        sentenceIndex={sentenceIndex}
                        word={word}
                        wordIndex={wordIndex}
                        key={sentenceIndex + '-' + wordIndex}
                      />
                    );
                  })}
                </div>
              );
            })}
          </div>

With the provider in my root layout.tsx:

<body className={inter.className}>
        <TooltipProvider delayDuration={0}>
          <ExperimentalProvider>{children}</ExperimentalProvider>
        </TooltipProvider>
      </body>

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 20 14.3% 4.1%;
    --foreground: 60 9.1% 97.8%;

    --card: 20 14.3% 4.1%;
    --card-foreground: 60 9.1% 97.8%;

    --popover: 20 14.3% 4.1%;
    --popover-foreground: 60 9.1% 97.8%;

    --primary: 60 9.1% 97.8%;
    --primary-foreground: 24 9.8% 10%;

    --secondary: 12 6.5% 15.1%;
    --secondary-foreground: 60 9.1% 97.8%;

    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;

    --accent: 12 6.5% 15.1%;
    --accent-foreground: 60 9.1% 97.8%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 60 9.1% 97.8%;

    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;
    --ring: 24 5.7% 82.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Example: Screenshot 2024-02-10 at 1 08 45 PM](https://github.com/shadcn-ui/ui/assets/114031148/174735d5-e18c-460c-b68c-6aef0e121b6c)

The text overlaps content behind it, there is no background to make it clean

polooner avatar Feb 10 '24 18:02 polooner