TTC
Theo's Typesafe Cult•16mo ago
max14

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
max14OP•16mo 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
Gabriel•16mo 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
Gabriel•16mo ago
It's working... But because it is encased inside the selcect, it is no allowing to overflow to the sides.
No description
No description
Gabriel
Gabriel•16mo ago
And I can't do side="right" on the content because of this.
Gabriel
Gabriel•16mo 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
max14OP•16mo 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
max14OP•16mo ago
max14
max14OP•16mo 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
Gabriel•16mo 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
max14OP•16mo ago
will do I think I'll leave it like that for the time being, but yeh you're right
Paul
Paul•16mo 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
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

Did you find this page helpful?