Comments (7)
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
from vue-directive-tooltip.
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.
from vue-directive-tooltip.
ok, I will take a look and try to reproduce the issue
from vue-directive-tooltip.
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.
from vue-directive-tooltip.
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.
from vue-directive-tooltip.
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!
from vue-directive-tooltip.
@veselj43 : thank you for your detailed report, that is very helpful!
I am going to take a look at this.
from vue-directive-tooltip.
Related Issues (20)
- Dynamic tooltip html content HOT 2
- Extend Directive HOT 1
- Toggle Hover Visibility HOT 4
- [feature-request] can we set tooltip position on mobile? HOT 2
- Tooltip not hiding instantly HOT 1
- strange behavior with v-tooltip.notrigger="{ html: 'imagesInfo' } HOT 2
- Animation? HOT 6
- Tooltip always visible in 1.5 HOT 1
- NPM update of package failing on post install script after update from 1.5.1 to 1.6.0 HOT 12
- Rendering issue with multi-column CSS
- Still not working on IE11 HOT 2
- Placement option outside of attribute HOT 2
- Documentation site is not scrollable in macOS Safari 12 HOT 1
- The tooltip doesn't close on clicking outside when the Click trigger is applied.
- Tooltip with HTML Content
- Bullets are not visible in tooltip (including examples in documentation)
- The web page of documentation website is being cropped.
- [feature] Autoclose Tooltip on click trigger
- [feature] Vue 3 support? HOT 1
- [feature] Popper 2.9.0
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-directive-tooltip.