[ATooltip]: trigger on unexpected elements

[Icet]

What is actually happening?

When we use ATooltip within an HTML tag, its triggering area becomes the current component instead of the current HTML tag. Here's an example:

<div class="flex flex-wrap gap-4">
  <ABtn>
    <ATooltip text="Hello!" />
    Hover Over Me
  </ABtn>

  <div>
    <ATooltip text="Hi!Anu"></ATooltip>
    Anu
  </div>
</div>

When the mouse moves over the entire outer div area, it triggers the appearance of the Tooltip

What is Expected?

It will only be triggered by its wrapping element.

[Icet]

I found that this is related to the setting of parentEl, which can be seen from here

[Icet]

Would it be easier to access targetEl if we change the structure of the Tooltip to the one below?

<ATooltip text="Hi">
  <ABtn>Hove Over Me</ABtn>
</Atooltip>

<ATooltip text="Hi">
  <div>Anu</div>
</Atooltip>

[JD Solanki]

Thanks for reporting. I contributed to VueUse and we can now use useParentElement from VueUse but unfortunately, I'm unable to find a solid way to add a tooltip to the component.

Certainly, we can wrap the target in the tooltip for ease but let's try if we can use the correct structure and still fix the bug.

Please let me know if you have any suggestions on this.

[JD Solanki]

I checked vuetify & quasar. They are adding flag like thing to their components to correctly get the parent element.

• Vuetify adds data-no-activator attribute to skip the DOM element from selecting as parent and omits defining this attribute for component's root element
• Quasar uses class q-anchor-skip something like that to dot he same

🤷🏻‍♂️

BTW, if we wrap the tooltip with target then in future we won't able to provide the dynamic target support.

We can do that but let's explore more to achieve the same this in more simpler way 😇