Tooltip closes after hovering target element's child

[saleh-old]

This is my usage code:

<button type="button" class="btn-nth relative" v-tooltip="{content:'Notifications (N)', offset: 8}" @click="changeRoute('notifications')">
    <i class="v-icon v-bell-2" aria-hidden="true"></i>
    <span class="queue-number" v-show="unreadNotifications" v-text="unreadNotifications"></span>
</button>

Tooltip opens when I hover the router-link but closes after my hovering reaches the inside element which is home-icon.

Any way to work around this?

Thanks for the great job BTW.

[hekigan]

home-icon is a component, right? What does it translate in actual html? It would help if you could reproduce this with the template from the new issue

[saleh-old]

Yeah, but it doesn't really matter. It could be anything and the issue still persists. I updated the initial reply with a simpler example.

[hekigan]

ok, I will take a look and try to reproduce the issue

[hekigan]

Ok, I am extremely late in my reply, but here goes. What I found is that in a case like this:

<span type="button" v-tooltip="{content:'Notifications (N)'}">
  test
  <span class="queue-number" v-show="unreadNotifications" v-text="unreadNotifications"></span>
</span>

where you have a dynamic Vue element using v-text + an extra node (text, image, whatever), somehow when you hover it, it disappears. I am not sure yet of the reason behind it but it's not because you are using icons or anything like it.

I understand that my answer is not ideal, but for the moment I am not sure why a dynamic element + another would make the tooltip disappear like a mouse out. If you only have your dynamic element inside, it works fine though.

[veselj43]

I am not sure if it is related to dynamic elements at all. Here is what i have:

<div class="parent" v-tooltip.right="'Tooltip text'">
    <div class="child">child</div>
</div>

.parent {
    width: 200px;
    padding: 15px;
    background: red;
    border: 1px #000 solid;
}

.parent>.child {
    background: pink;
    padding: 5px;
    border: 1px #000 solid;
}

Anytime i go from pink area to red area, tooltip disappears. (Version 1.4.2) It seems to me like it listens to mouse out also for every child, if i add another child element:

tooltip disappears anytime i leave any child, so child 2 to child 1 or child 1 to red area.

Hope it helps.

[riboher]

Hi there! Facing the exact same issue. When having this block of code

<div
    v-tooltip.right="{
      'content': name
    }">
    <font-awesome-icon
      :icon="fontAwesomeIcon"
      class="geo-left-panel__navbar__tab-button-container__icon"
      :title="name"
      fixed-width/>
  </div>

the tooltip works fine until I hover on the inner icon, then the tooltip dissappears. Thanks!

[hekigan]

@veselj43 : thank you for your detailed report, that is very helpful! I am going to take a look at this.