search

themesberg / flowbite-vue

Official Vue 3 components built for Flowbite and Tailwind CSS
https://flowbite-vue.com
MIT License
723 stars 116 forks source link

How to make the tooltip stay in the same position horizontally across multiple elements in a container? #289

Open bcostaaa01 opened 2 months ago

bcostaaa01 commented 2 months ago

Hi flowbite-vue development team, and community 👋

Recently, I tried to achieve a particular piece of functionality while using your fwb-tooltip component, which I will first describe for context:

My goal is to make sure that where I am trying to use the tooltip, and when I have a container with a collection of elements inside, and then hover over any of them, the position of the tooltip will be the same horizontally for all of them. Imagine rendering a sidebar with a bunch of data, and when you hover over each piece of data, you want the tooltip to always render in the same position, and not jump around wherever you hover in the item. To make it a bit more clear, I want it to hug the right hand side of the parent element (or in the example screenshot, hug the right hand side of the table/column).

tooltip example in a table

For extra context, I am trying to use the right placement in this scenario.

I found a couple of places that could potentially be affecting this in the component library, but I have a particular intuition that I need to make changes in the floating-vue.js file.

My question is whether it is possible to make the position of the tooltip the same horizontally across different elements/hug the tooltip to the right hand side of the parent element/table/column, regardless of the length of a string, for example, without having to make changes to the component library, or if there is a way of specifying the position of the tooltip in such a scenario with a different approach? Has anyone faced this issue/ran into such a scenario before while using fwb-tooltip? If there are changes needed in the original component library, how, where, and which changes should I be making?

I hope to hear back from the community!

Sqrcz commented 2 months ago

Hey, can you please create a simple example to show what you mean... I would like to see the code and it's behavior... so anything like code + gif or some online sandbox would be good.

bcostaaa01 commented 2 months ago

Hey, can you please create a simple example to show what you mean... I would like to see the code and it's behavior... so anything like code + gif or some online sandbox would be good.

Hi, thank you for your reply! I will be posting a finished code sandbox link here next week, or so, and then I will await your feedback on it 🙂