akryum / floating-vue

💬 Easy tooltips, popovers, dropdown, menus... for Vue

Floating Vue

Easy tooltips, dropdowns, menus... with Floating UI

📚️ Documentation

The package has been renamed from v-tooltip to floating-vue and now uses floating-ui instead of popperjs. You can find the new changelog for both v1 (for Vue 2) and v2 (for Vue 3) here. The changelog is currently not pushed to GitHub Releases.

New versions:

Old	New	Target
v-tooltip v3	floating-vue v1	Vue 2
v-tooltip v4	floating-vue v5	Vue 3

💚️ Become a Sponsor

Sponsors

---

LICENCE MIT - Created by Guillaume CHAU (@Akryum)

floating-vue's Issues

Uncaught TypeError: Super expression must either be null or a function, not object

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.

Issues on mobile

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).

Tooltip not working ? Bootstrap 4 issue

Hi,

Cannot get tool tips to work. Using bootstrap 4 wondering if thats causing an issue.

Thanks

Clear event listeners on auto destroy

On dispose(), onScroll and onResize events listeners not removed.

Tooltips stuck when applied to many elements

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.

Add delay option

Would it be possible to add a tooltip delay option?
Thanks!

fail to apply css in scoped style

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>

Popover trigger manual not working

I set open to true, but popover anyway not shown

IE11 polyfill

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.

Tooltip don't work when app is on fullscreen

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

Can tooltip be made hoverable?

So can I make ti hoverable somehow?

"TypeError: __WEBPACK_IMPORTED_MODULE_0_tether_tooltip___default.a is not a constructor"

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.

Custom classes are not always added to the tooltip element

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
    }
  }
}

Many tooltips on page

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?

Dynamically generated element tooltip position problem

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 ?

Delayed elements are visible on quick move over

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.

Dynamic tooltip using Laravel data icm blade

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!

按照例子，一次也没成功过

能写个完整的example吗

Disable a tooltip option

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?

TypeError: undefined is not a function (evaluating 'Object.assign({}, __WEBPACK_IMPORTED_MODULE_0__v_tooltip__["a" /* defaultOptions */], options || {})')

I use 2.0.0-beta.8 and it works well in the browser, but it crashes on unit testing.

Set classes by placement

Is that possible to add an option to set classes by placement?

Webpack Production - gulp-uglify fails

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)

iOS Tap Behavior

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>

Codepin Example

Add prop for target reference

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.

IE Compatibility issue

Internet Explorer (Edge and 10) get an error: Object doesn't support property or method 'assign'

tooltip isnt displayed on dynamically rendered elements

<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?

themes and classes

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.

Real time render tooltip if necessary？

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: Tooltip to attach to at SuperTooltip

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

Display arrow

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

1.0.4 has a bug

ERROR in .//v-tooltip/dist/v-tooltip.js
Module not found: Error: Cannot resolve module 'Tooltip' in xxxxxxxxxx\node_modules\v-tooltip\dist
@ .//v-tooltip/dist/v-tooltip.js 1:97-115

I uninstall 1.0.4 and re-install 1.0.0. it works.

IE11 Object expected

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.

Installation without npm/webpack?

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?

vue 1.0 support?

Is there any way this could be adapted to work with VueJS 1.0?

Why hide on mouseover when using hover trigger?

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.

Set component as tooltip content

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.

How to add opacity transition in v2?

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?

Disable the tooltip if `content` is falsy

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

Tooltip unresolved error

I'm getting this error:

Cannot resolve module 'Tooltip' in /home/dave/Work/app/node_modules/v-tooltip/dist

Any ideas?

Binding tooltip in ES6 template string ?

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>` 

Dynamic CSS class does not apply after auto dispose

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.

Offset option doesn't do anything?

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>

Example don't work for me

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()
}
})

Manual option, but no details on how to trigger?

In documentation, Naming of directive is wrong.

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.'">

[Vue warn]: Failed to resolve directive: tooltip

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

Is there a way to change the default tooltip classes

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

How do you use the v-tooltip with a router-link?

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>

Inconsistent browser support

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?

Unfortunately, vue ssr is not supported

If inscribe