Theo's Typesafe Cult•13mo ago

ShadCn Styling / Functionality Issue

Hey all, this is a slightly unusual use case, but I've been asked to implement it, I have a list of items in a Select box, which I want to display a tooltip for each one explaining what that item is. I've tried so many combinations but can't seem to get it working, help would be much appreciated 🙂

11 Replies

max14•13mo ago

import {
  Tooltip as ShadCnTooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

type TooltipProps = {
  text: string;
  triggerText: string;
};

export default function Tooltip({ text, triggerText }: TooltipProps) {
  return (
    <TooltipProvider>
      <ShadCnTooltip>
        <TooltipTrigger asChild>
          <p className="w-full">{triggerText}</p>
        </TooltipTrigger>
        <TooltipContent side="top" className="bg-black text-white">
          <p>{text}</p>
        </TooltipContent>
      </ShadCnTooltip>
    </TooltipProvider>
  );
}

import {
  Tooltip as ShadCnTooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";

type TooltipProps = {
  text: string;
  triggerText: string;
};

export default function Tooltip({ text, triggerText }: TooltipProps) {
  return (
    <TooltipProvider>
      <ShadCnTooltip>
        <TooltipTrigger asChild>
          <p className="w-full">{triggerText}</p>
        </TooltipTrigger>
        <TooltipContent side="top" className="bg-black text-white">
          <p>{text}</p>
        </TooltipContent>
      </ShadCnTooltip>
    </TooltipProvider>
  );
}

<Select defaultValue={roles[0].value}>
            <SelectTrigger className="w-full flex text-center">
              <SelectValue />
            </SelectTrigger>
            <SelectContent className="flex text-center">
              <SelectGroup>
                {roles.map((role) => (
                  <>
                    <SelectItem className="cursor-pointer" value={role.value}>
                      <Tooltip
                        key={role.value}
                        text={role.label}
                        triggerText={role.value}
                      />
                    </SelectItem>
                  </>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>

<Select defaultValue={roles[0].value}>
            <SelectTrigger className="w-full flex text-center">
              <SelectValue />
            </SelectTrigger>
            <SelectContent className="flex text-center">
              <SelectGroup>
                {roles.map((role) => (
                  <>
                    <SelectItem className="cursor-pointer" value={role.value}>
                      <Tooltip
                        key={role.value}
                        text={role.label}
                        triggerText={role.value}
                      />
                    </SelectItem>
                  </>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>

this is the closest I've come to getting it right, but I would like the tooltip to activate wherever my cursor is on the select item (not just the items value)

Gabriel•13mo ago

Hi @max14 , I tried, and this is the best I could do:

export default function Test() {
  const fruits = [
    { name: "Apple", value: "apple", tooltip: "Keeps the white coat away!" },
    { name: "Banana", value: "banana", tooltip: "Its my favorite!" },
    {
      name: "Blueberry",
      value: "blueberry",
      tooltip: "Makes your teeth blue!",
    },
    { name: "Grapes", value: "grapes", tooltip: "Wine!" },
    {
      name: "Pineapple",
      value: "pineapple",
      tooltip: "Why don't pinecones have their name?",
    },
  ];

  return (
    <TooltipProvider>
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>

            {fruits.map((fruit) => (
              <Tooltip key={fruit.value}>
                <TooltipTrigger asChild>
                  <SelectItem key={fruit.value} value={fruit.value}>
                    {fruit.name}
                  </SelectItem>
                </TooltipTrigger>
                <TooltipContent>
                  <p>{fruit.tooltip}</p>
                </TooltipContent>
              </Tooltip>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </TooltipProvider>
  );
}

export default function Test() {
  const fruits = [
    { name: "Apple", value: "apple", tooltip: "Keeps the white coat away!" },
    { name: "Banana", value: "banana", tooltip: "Its my favorite!" },
    {
      name: "Blueberry",
      value: "blueberry",
      tooltip: "Makes your teeth blue!",
    },
    { name: "Grapes", value: "grapes", tooltip: "Wine!" },
    {
      name: "Pineapple",
      value: "pineapple",
      tooltip: "Why don't pinecones have their name?",
    },
  ];

  return (
    <TooltipProvider>
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>

            {fruits.map((fruit) => (
              <Tooltip key={fruit.value}>
                <TooltipTrigger asChild>
                  <SelectItem key={fruit.value} value={fruit.value}>
                    {fruit.name}
                  </SelectItem>
                </TooltipTrigger>
                <TooltipContent>
                  <p>{fruit.tooltip}</p>
                </TooltipContent>
              </Tooltip>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </TooltipProvider>
  );
}

Gabriel•13mo ago

It's working... But because it is encased inside the selcect, it is no allowing to overflow to the sides.

Gabriel•13mo ago

And I can't do side="right" on the content because of this.

Gabriel•13mo ago

Maybe radix-ui has some settings for it that we can use... https://www.radix-ui.com/primitives/docs/components/tooltip

Tooltip – Radix UI

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

max14•13mo ago

yeh I also got it to that stage thanks for helping have just been reading through the docs but can't find that much

max14•13mo ago

interestingly that kinda works but its quite laggy when going up the options which is due to the show delay not working for some reason

Gabriel•13mo ago

I think it’s because your mouse hovers over the tooltip when going up, and it briefly isn’t highlighting an option The ideal solution is to make it appear on the side. Either left or right If you fix it let me know

max14•13mo ago

will do I think I'll leave it like that for the time being, but yeh you're right

Paul•13mo ago

Look at the example in the playground on shadcn for the dropdown. https://ui.shadcn.com/examples/playground You want to use a popover and not a tooltip. Look at the code here. https://github.com/shadcn-ui/ui/blob/main/apps/www/app/examples/playground/components/model-selector.tsx

shadcn/ui

Beautifully designed components built with Radix UI and Tailwind CSS.

GitHub

ui/apps/www/app/examples/playground/components/model-selector.tsx a...

Beautifully designed components built with Radix UI and Tailwind CSS. - shadcn-ui/ui

Gaming

Programming

ShadCn Styling / Functionality Issue