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
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)
Hi @max14 , I tried, and this is the best I could do:
It's working... But because it is encased inside the selcect, it is no allowing to overflow to the sides.
And I can't do side="right" on the content because of this.
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.
yeh I also got it to that stage
thanks for helping
have just been reading through the docs but can't find that much
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
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
will do
I think I'll leave it like that for the time being, but yeh you're right
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
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