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
max14β€’14mo 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)
gybia
gybiaβ€’14mo 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>
);
}
gybia
gybiaβ€’14mo 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
gybia
gybiaβ€’14mo ago
And I can't do side="right" on the content because of this.
gybia
gybiaβ€’14mo 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
max14β€’14mo 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
max14β€’14mo ago
max14
max14β€’14mo 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
gybia
gybiaβ€’14mo 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
max14β€’14mo ago
will do I think I'll leave it like that for the time being, but yeh you're right
Paul
Paulβ€’14mo 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
Want results from more Discord servers?
Add your server