Tooltip horizontal alignment

[SanmayJoshi]

This proposal suggests allowing aligning tooltips horizontally with options like tooltip-start, tooltip-center, and tooltip-end, similar to dropdowns. Implementing this feature will help manage tooltip overflow on smaller screens.

[SanmayJoshi]

Don't want to spam here, but this is a really handy feature for managing overflowing large tooltips sitting in corner of a block/screen. Would really appreciate if somebody can share a workaround till the feature gets there. I tried recreating the behavior based on the CSS code from dropdowns, but to no avail. Using dropdowns with hover as of now.

Thanks.

[saadeghi]

Can you share an image or sketch of the positions you need? I can help.

[pdanpdan]

I think he means something like this: https://play.tailwindcss.com/sUNfYqhwWV?file=css

[SanmayJoshi]

I think he means something like this: https://play.tailwindcss.com/sUNfYqhwWV?file=css

Thanks a ton. This is certainly what I meant. I had 'left' and 'right' in the mind as well.

Have been using dropdowns now and one of the difference I found with tooltips is the little arrow (and missing shorthand with data-tip). I'm okay with dropdown for now, I guess.

Also, I noticed that both dropdown-hover and tooltip stays active on hover and focus. It works for me and all good if that's intentional, but I thought would let you know. Example: https://play.tailwindcss.com/cO4kzcx6NH

[pdanpdan]

Also, I noticed that both dropdown-hover and tooltip stays active on hover and focus. It works for me and all good if that's intentional, but I thought would let you know. Example: https://play.tailwindcss.com/cO4kzcx6NH

Yes, it is by design - mobiles (devices without fine pointer) do not have hover

I added a PR for alignment modifiers #4363