akryum / floating-vue Goto Github PK
View Code? Open in Web Editor NEW💬 Easy tooltips, popovers, dropdown, menus... for Vue
Home Page: https://floating-vue.starpad.dev/
License: MIT License
💬 Easy tooltips, popovers, dropdown, menus... for Vue
Home Page: https://floating-vue.starpad.dev/
License: MIT License
I'm creating a large tooltip with your plugin at the moment. It would be useful when I'm abled to use a component as the tooltip-content. That would allow me to make my code more clear.
Hello,
I want to use this on my router-link, but its not working when i hover over the button.
<router-link :to="{ name: 'AccountsEdit', params: { id: item.id }}" v-tooltip="'tester for the tooltip system'">
{{ item.name }} {{ item.description }}
</router-link>
Right now when providing a custom template, the 'tooltip' class must be maintained. Is there a way to change that class name to something else? The current name is very generic and can conflict with other potential tooltip classes on a page
So can I make ti hoverable somehow?
Would it be possible to allow a dynamic class to be applied to the tooltip, rather than the hard-coded one? In my app, we use different tooltip styles depending on the context.
Hi,
I just ran into an issue where I use the notation {content: xxx()}
where xxx
is function and can return false
to disable the tooltip.
I created a JSFiddle here: https://jsfiddle.net/599eb4o9/
As you can see in the console logs:
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at DropInstance.setupElements ([email protected]:250)
at new DropInstance ([email protected]:201)
at new drop ([email protected]:104)
at new Tooltip ([email protected]:77)
at createTooltip ([email protected]:1)
at bind ([email protected]:1)
at callHook$1 (vue.js:5126)
at _update (vue.js:5052)
at Array.updateDirectives (vue.js:5033)
at invokeCreateHooks (vue.js:4631)
It works when a computed property returns false but not with a function. It works as well when I use the text notation (v-tooltip="blabla"
).
Everything is on the JSFiddle.
Cheers
Jerome
In my case i have some elements which generated dynamically. Tooltip position not correct on most right element which is near to view port of browser. I can't give fiddle
because i am using this on my live app.Below you can see screenshot and video recorded. Furthermore if anyone need fiddle
then i will create on dummy data.
video :
https://www.useloom.com/share/93dae2bef3ea49a7a889792b6f5ae738
screenshot :
Image Link
Is there any way set position auto base on browser or relative to specific element ?
By default, tooltip element is destroyed after 5000ms. Hover on the element again and a new instance of the tooltip is created on the fly but the CSS class does not apply.
For example:
<input v-tooltip.top="{ content: 'Invalid input.', classes:'tooltip-danger' }">
and CSS:
.tooltip-danger { .tooltip-inner { background: red !important; } }
The background of the tooltip will be red for the first time, after 5000ms it got destroyed, hover on the element again, a new tooltip is created but it has the default black background.
Looked at the element, and for the first time, the class 'tooltip-danger' is there.
But not anymore after auto dispose.
Hello,
We use v-tooltip on a table display providing additional information on cell data with the tooltip. In this scenario, in some browsers tooltips get stuck when the user goes over multiple cells to "pinpoint" the one he's interested in and the overall efect is that something is broken.
Here is a JSFiddle that emulates our scenario:
https://jsfiddle.net/sy8hshaL/
I've had more luck reproducing it with Firefox than with Chrome.
I have a question - i had unlimited (loads by lazyload) posts on up. Each post has 3 buttons with tooltips. So as this module designed it will attach to body unlimited*3 divs with a tooltips. Isn't this a big chance to memory leak?
Hi,
Getting this error "Uncaught TypeError: Super expression must either be null or a function, not object" when using the latest release version v2.0.0-beta.2.
Reverting down to the 1.1.2 works fine.
Thanks for v-tooltip ~
It was found that v-tooltip calulate position when inited,could you give me the prop / option to real time render it?
Since we somtimes use it in an Expansion panel Component
, each item was hidden when init, So was the tooltip. The tooltip shown with wrong position after that.
Feature request and Best Wishes! Thank you~
ERROR in .//v-tooltip/dist/v-tooltip.js/v-tooltip/dist/v-tooltip.js 1:97-115
Module not found: Error: Cannot resolve module 'Tooltip' in xxxxxxxxxx\node_modules\v-tooltip\dist
@ ./
I uninstall 1.0.4 and re-install 1.0.0. it works.
能写个完整的example吗
Internet Explorer (Edge and 10) get an error: Object doesn't support property or method 'assign'
Getting errors on hover when I put my app on fullscreen.
chrome 59 errors:
Uncaught TypeError: Cannot read property 'offsetHeight' of null
from popper.js
Uncaught TypeError: Cannot read property 'contains' of null
from tooltip.js
same issue on all browsers
Tooltips appear on tapping the element, but do not disappear when the finger is removed.
Also, on a narrow screen, tooltips ignore the positioning (.right tooltips appear centered).
I think there are many cases where you need to specify refence manually.
I using fullcalendar and need popup for this, but i can't set every card in calendar in slots, because fullcalendar not use vue.
And i have one more case.
<table-ui :headers="budgetTableHeaders"
:rows="budgetTableRow"
v-if="budgetTableRow">
<template slot="row" scope="row">
<budget-item
:item="row"
:activeComment="comment && comment.index === row.index"
:currentMonth="row.index === 1"
@openPopup="openPopup"
@openCommentModal="openCommentModal"/>
</template>
</table-ui>
<v-popover :open="Boolean(subTable)" target="subTableTarget" trigger="manual" v-if="subTable">
<budget-sub-item :profiles="subTable.profiles"
:currentMonth="subTable.index === 1"
:familyRatio="subTable.ratio"
slot="popover"/>
</v-popover>
event openPopup fire on every hover.
Thx in advance for your work.
How can we get the arrow to display?
Currently I removed the CSS line display: none
but it is still not appearing.
Also tried display: block
I'm getting this error:
Cannot resolve module 'Tooltip' in /home/dave/Work/app/node_modules/v-tooltip/dist
Any ideas?
Both Vue.js and Tooltip.js support Internet Explorer 10 and 11, but v-tooltip does not.
There are dependencies on Object.assign
and Symbol
which are not supported in IE. But then again, those dependencies are just a result of Babel transpiling Object spread and a for-of loop. Hence adding IE support is probably just a matter of tweaking the Babel config.
What are your thoughts about this?
For some reason the gulp-uglify fails when trying to import this package :
SyntaxError: Unexpected token punc «,», expected punc «:»',
I've dug through the source code and didn't see anything wrong. (could be my webpack config is bad as well)
If inscribe
After I upgraded from "2.0.0-beta.5" to latest "2.0.0-beta.12" the classes that I have added to the v-tooltip="{ classes: '...' }"
are sometimes not adding to the tooltip element. So some one or two first mouse-overs after page reloading look fine, i.e. the classes applied well, but after that it stops adding these classes.
To be more specific I'm adding these options to my tag's v-tooltip
attribute.
classes: 'vue-tooltip-boxes-small',
container: '.item-form-toolbar',
popperOptions: {
modifiers: {
offset: {
offset: 3
}
}
}
In your demo website with v1 the opacity transition is available.
Can you add an extra class "active" to a tooltip, so we can add the opacity transition again, or is there an other solution?
Set a defaultDelay: e.g. 1000
When you have 3 elements with a tooltip and you move over from the 1st to 2nd to 3rd element in less then 1000ms, all tooltips appear after each other.
Need a clearTimeout when leave an element.
I use 2.0.0-beta.8 and it works well in the browser, but it crashes on unit testing.
I haven't been able to see the offset option work so far. My tooltip looks like this:
<span v-tooltip="{content: 'hello world', placement: 'top-end', offset: 100}"></span>
Using the following component causes the Tooltip to display when you tap the button. However, the tooltip does not disappear when tapping anywhere else on the screen. The only way to get the tooltip to go away is to refresh the page.
<template>
<button v-tooltip.left-middle="content">Content</button>
</template>
<script>
export default {
data() {
return {
content: 'Hello'
}
}
}
</script>
On dispose(), onScroll and onResize events listeners not removed.
Is that possible to add an option to set classes by placement?
Hi,
I had used the tooltip and it was fine until today. When i was trying to access the website, I got the following error. Do you think its because of the change in library or any other issues?
vue.min.js:7 Error: Tooltip Error: You must provide a target for Tooltip to attach to at SuperTooltip.Tooltip (unpkg.com/[email protected]:44) at new SuperTooltip (unpkg.com/[email protected]:1) at createTooltip (unpkg.com/[email protected]:1) at update (unpkg.com/[email protected]:1) at Yt (vue.min.js:6) at Wt (vue.min.js:6) at Array.qt (vue.min.js:6) at b (vue.min.js:6) at _ (vue.min.js:6) at b (vue.min.js:6)
Cheers
Trying to get it working in the browser. Using v1.1.0. I've utilised the plugin using the v-tooltip directive but is breaks:
"TypeError: __WEBPACK_IMPORTED_MODULE_0_tether_tooltip___default.a is not a constructor"
Constant problems when using browser includes.
I used it as per documentation and include directive like: -
Vue.directive('my-tooltip', VTooltip);
and then in the template, I am using it as:
<button v-tooltip="'You have ' + count + ' new messages.'">
and it was not working for me then I used below the line and it works for me
<button v-my-tooltip="'You have ' + count + ' new messages.'">
Hi,
Cannot get tool tips to work. Using bootstrap 4 wondering if thats causing an issue.
Thanks
version 2.0.0.beta.4, version 2.0.0.beta.3, version 2.0.0.beta.2, version 2.0.0.beta.1
In my code, example below do not work.
import Vue from 'vue'
import { VTooltip } from 'v-tooltip'
Vue.directive('my-tooltip', VTooltip)
I do not see anything and I have no errors.
but this example do job perfekt
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
Hi,
I have generic question on using plugins like v-tooltip. I would like to use v-tooltip source directly as normal external plugin script (imported with script src) without using requirejs/webpack or similar solution. Is it possible to you v-tooltip without building it first?
question 2) If building is mandatory due to dependencies, how can I make such a build that it's globally available for my external vue-scripts which do not rely on building? As far as I have learned, final distributed build.js is on it's own namespace and you cannot call methods within it's space from other external files?
Hi,
I've tested in IE11 and am seeing this 👍
Object expected
I'm using the IE pollyfills here: <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>
Any ideas?
Cheers! If you need any further info please let me know.
Using the example from the README, I get [Vue warn]: Failed to resolve directive: tooltip
on Vue 2.4.4 and Webpack 3.6.0
I generate some dynamically html content where i want to add tooltip.This html is inside Es6 template string
format.In ES6 template string
we use grave
symbol on keyboard.Is there any way to use 'v-tooltip` attribute inside template string ?
Such as :
let htmlContent = `<div class="popover" role="tooltip"> <i v-tooltip.top-center=" 'Remove' "></i> </div>`
I'm implementing the tooltip as part of a component. I'm passing the tooltip as a string, like this:
<ui-button tooltip="Round button"></ui-button>
Inside the component I check for the presence of the 'tooltip' prop, and pass an object with the string as content:
return {content: '' + this.tooltip + ''}
The problem is that if the prop is not present, meaning that this.tooltip === null
, I can't pass null to v-tooltip
. The reason is that v-tooltip
is expecting a content
property. Otherwise it errors with this:
TypeError: Cannot read property 'content' of null
The solution I made so far was to pass the object still, but also add a class to hide the tooltip. So if tooltip
prop is not present, I return this:
return {content: '' + this.tooltip + '', classes: 'hidden-tooltip'}
And then I hide the tooltip via CSS.
But this has the big disadvantage that the tooltip is still created in the DOM, only hidden.
How can I v-if
the tooltip entirely?
Is there any way this could be adapted to work with VueJS 1.0?
<p>
<span class="item" v-for="item in list" v-tooltip="item.owner">{{ item.body }}</span>
</p>
With this setup, the tooltip works fine. However, list
is actually a computed property:
computed: {
list() {
return this.some.other.list
}
}
If this.some.other.list
changes, list
is updated and a new item
is rendered, but it doesn't get a tooltip.
Is there a way to "initialize" tooltips on newly rendered items?
VTooltip doesn't work on IE11 currently.
Object doesn't support property or method 'assign'
So I guess we can solve that ourselves with an object.assign polyfill but it would be nice if this plugin did that out of the box.
if I put these css (as described in readme) in scoped style in a .vue file, it won't work.
/* scoped */
<style scoped lang="sass?indentedSyntax">
.tooltip {
display: block !important;
padding: 4px;
z-index: 10000;
.tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip-arrow {
display: none;
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
}
</style>
I'm referring to this block of code:
https://github.com/Akryum/v-tooltip/blob/6863c64e2520aaee36391644e5c7e16515d4bcfd/src/v-tooltip.js#L153-L156
The default behavior of tooltip.js is to allow mouse hovering on the tooltip, so you can select text, click links etc.
Is there any way to disable this default hide-behavior in v-tooltip? I'm only able to come up with very hacky solutions.
I am rendering a list of items in a Laravel blade template and I like to add v-tooltip directive to it. For example, I have $todos and like to use $todo->notes as tooltip.
However the following code gives me an error:
<span v-tooltip="'{{ $todo->notes }}'">My todo item</span>
I expected the dynamic text {{ $todo->notes }} to be inserted and then the tooltip initialization...?
It does work in this case, i.e., when the text is not dynamically inserted.
<span v-tooltip="'My tooltip text'">My todo item</span>
Any help is appreciated!
Would it be possible to add a tooltip delay option?
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.