Do not hide tooltip if mouse over tooltip content itself

[alekbarszczewski]

Feature:

Right now when you hover on a tooltip and try to mouseover the tooltip it disappears. In my case I have to display "Learn more" link inside a tooltip and make it clickable by a user. I know that it can be achieved by attaching tooltip element as a child of element that triggers tooltip so it keeps hovered when user mouseovers the tooltip. I couldn't find a way to achieve that with vue-directive-tooltip. There is container option in Popper.js/tooltip (https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/tooltip-documentation.md search for 'container') but it seems that you are using Popper.js directly without it's tooltip component.

[hekigan]

Yes, Popper.js is the positioning engine and I prefer to have my own implementation of the tooltip built on top of that.

You can already "kind of" achieve what you want with the programmatic option describe in the doc below: https://hekigan.github.io/vue-directive-tooltip/

But I feel that the behaviour that you want is just a hover with a small delay. And if the user keep the mouse over the tooltip during that interval, it cancels out the removal of the tooltip to be able to interact with the content. Am I correct?

[alekbarszczewski]

@hekigan Hey, I will try to experiment with programmatic usage. However I am not sure if interval is the right way. Normally you achieve (AFAIK) something like this by adding tooltip element as a child of the element that triggers the tooltip, and when you are moving mouse from trigger element to the tooltip, trigger does not "loose" hover state.

[hekigan]

When I have some time, I will add the 'delay' before disappearing feature (default value + as an option). That way it will be easier to have a good control over the tooltip.

[alekbarszczewski]

@hekigan your solution does not work for me :(. There is a gap between tooltip and trigger. When user moves cursor too slowly then tooltip disappears before mouse enters it's area. On the other hand if I set timeout to higher value it works (still if user does not move cursor too slow) but when I move mouse from the trigger then it looks "laggy" and strange because tooltip disappears after some moment. I experimented with timeouts 200-1000ms. For me the only solution is to attach tooltip element as a child of the trigger. so there is no gap when user moves cursor from trigger to tooltip and everything works very quick. Is there any chance that you could add such functionality? For example additional prop/option that is #id of element inside which tooltip should be appended/displayed.

For example:

<span id="id-of-trigger" v-tooltip="{ html: 'id-of-content', container: 'id-of-trigger' }">Trigger</span>

[hekigan]

I will work on the delay option that I wrote about in my last message this weekend. It should work for your use case.

When implemented, I will write you back here.

[alekbarszczewski]

@hekigan thanks!

[hekigan]

@alekbarszczewski I just updated the script. You can now use the delay option.

The documentation has been updated too, so you can take a look there.

I think that you should use something like that as a test:

<span v-tooltip="{ html: 'id-of-content', delay: 600 }">Trigger</span>

[alekbarszczewski]

@hekigan Hey, it kind of works, but in case this solution is not acceptable. It looks very laggy when tooltip disappears after some delay... As I said if I set short delay then when user moves mouse to the tooltip too slow then tooltip will disappear before cursor hovers tooltip itself.

[hekigan]

I now understand better what you want to achieve.

It's like when you have a list UL > LI for example. If you hover the LI tag, the UL tag knows that it's still being in the hover state because of the parent/child relationship.

The current implementation does not allow to do that. Sorry about that. This kind of behaviour is mostly seen in menus more than tooltips.

[alekbarszczewski]

@hekigan I found one bug in current behaviour I think:

<div id="test123">
      some text <br/>
      aaaaaaaa
      <br/>
      <br/>
      <p>some text</p>
</div>
<a href="#" v-tooltip="{ html: 'test123', delay: 1000 }">
      tooltip
</a>

If you hover the trigger and then move mouse to a tooltip it's ok. But then if you will move your mouse down in the place below "some text" but above tooltip edge then tooltip will disappear after delay. This bug is more "visible" if you add padding to the tooltip content and place some elements inside tooltip (paragraphs, links, etc). When you move mouse over those elements it's ok, but then if you move it from them to the tooltip content (but still inside tooltip!) then tooltip disappears (after delay). It seems that somehow "mouseleave" events from elements that are inside tooltip are propagated down to the tooltip and it "thinks" that mouse is no longer over it.

[hekigan]

You are right. Thank you for pointing that out. I am going to fix this right now.

[hekigan]

Just an update on the disappearing matter, it should be fixed now!

[alekbarszczewski]

@hekigan On 1.3.2 this issue still remains. Same example, nothing changed and tooltip disappears when you move cursor of of any of its children, but still inside tooltip.

[hekigan]

Okayyyyyyy. :)

Looks like it was an event propagation issue. What about version 1.3.3?

[alekbarszczewski]

@hekigan works now :D. Thanks!