New floating-vue package: changes and migration roadmap

[Akryum]

v-tooltip has been renamed to floating-vue and now uses floating-ui instead of popperjs.

The package has been renamed from v-tooltip to floating-vue. 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 v2	Vue 3

---

Original post:

Version 3 will be a big release. Apart from all the refactoring and code cleaning that went into it, changes and migration paths need to be documented. 📜

I hope you will like the new version (despite all the breaking changes) and that it will be you ultimate tooltips and dropdowns library!

Notes

• Please note that V3 is currently in alpha, which means the API (and therefore this list) is unstable and may change at anytime.
• Vue 3 support will be implemented in V4 which will be released in parallel to V3 so you can choose the correct version depending on you Vue version. It's available now! This will prevent me from polluting the code with conditions and hacks to make it work on both versions simultaneously.
• An entirely new documentation website is planned with a full migration guide (wip here)
• Bonus: as of the current alpha, 33% lighter than V2! 👌

Here is a preview of the most visible implemented changes (checkboxes are for docs):

Breaking changes

Migration guide

• Now uses popperjs 2 (@popperjs/core)
• The global configuration has been entirely remade and streamlined, now features themes
• Modifiers API has changed, now an array of modifiers such as { name: 'overflow', enabled: true }
• Modifiers should be set with the modifiers prop
• trigger renamed to triggers and now must be an array (use empty array instead of 'manual')
• boundariesElement prop renamed to boundary
• open prop renamed to shown
• openGroup prop renamed to showGroup
• Default dropdown component is now <VDropdown> instead of <v-popover>
• The slot popover was renamed to popper
• isOpen slot prop renamed to shown
• offset prop must now be an array: [skidding, distance]
• CSS classes have been rewritten with the v-popper prefix and in a BEM-like fashion to help preventing conflicts
• Removed props: popoverClass, popoverBaseClass, popoverWrapperClass, popoverArrowClass, popoverInnerClass, openClass
• The v-close-popover directive has been renamed to v-close-popper
• The component HTML structure has been simplified
• As a result events listeners (most notably focus) and aria-describedby attribute are now applied on your elements directly instead of an internal div
• The component root element now has width: max-content by default to use the content size instead of the page width
• The v-tooltip directive now uses the TooltipDirective component (using Popper component internally), which means that there are no longer separate APIs between the components and the directive (the directive has a few additional props though) and you should now be using the components props on the directive object when needed
• Removed v-tooltip directive options: classes, targetClasses, template, arrowSelector, innerSelector, hideOnTargetClick (replaced by hideTriggers), loadingClass

New

• New powerful & flexible theme system (example)
• Themes can extend another theme
• Default styles (an import away)
• strategy prop
• modifiers prop
• showTriggers prop
• hideTriggers prop
• popperTriggers prop
• popperShowTriggers prop
• popperHideTriggers prop
• instantMove prop
• New VDropdown component with dropdown default theme
• New VTooltip component with the tooltip default theme
• New VMenu component with the menu default theme extending the dropdown theme, with hover trigger on both the target and the popper itself
• Fully customizable do-it-yourself poppers with <Popper>, <PopperContent>, <PopperWrapper> components and slots

[sjblasko]

Out of curiosity, how is the version 3 alpha going? We are in the process of migrating a legacy .NET application to utilize a Vue 3 front end and would love to utilize this component. I know you had mentioned that version 4 would be the release that would support Vue 3 and we were just wondering if you or the community had a timeline for the version 3 and 4 releases. Thanks for everything you do!

[Akryum]

Very soon!

[sjblasko]

@Akryum, any news? We are looking to utilize the Tooltips and the VDropdown very soon and the converted version of this project only has working Tooltips (https://github.com/paulshen/v-tooltip). The VPopover is completely broken in the Vue3 project.

[Akryum]

@sjblasko It's now available with yarn add v-tooltip@vue3

[Akryum]

The Vue 3-compatible version is now available! You can install it using the 4.0.0-alpha.1 version or using the vue3 tag:

yarn add v-tooltip@vue3

[jaulz]

Thanks for your work 😊 As a vue2 user, should I better use version 3 or 4?

[Akryum]

V3 => Vue 2
V4 => Vue 3

[eugenevk]

Can I use npm to install the Vue3 version? Tried

npm install --save v-tooltip@vue3

but that doesn't seem to work.

[eugenevk]

@Akryum I also noticed this warning/error:

[eugenevk]

@eugenevk I am using tailwind also but haven't tried yet to add a custom style it after getting it install. I will let you know once I try it

@valanto Have you been able to get your tooltips styled in any way? Or are they not showing any styling as well, like mine?

[valanto]

@eugenevk They are working for me now with default styling

I think what you are missing is in main.js to import the default style of the tooltip
import "v-tooltip/dist/v-tooltip.css";

See more information here: https://v-tooltip.netlify.app/guide/#quick-start

[eugenevk]

Hero! You made my day @valanto ! Solved. Case closed @Akryum

[eugenevk]

Only interesting additional thing for me would be if TailwindCSS can be used to specify specific classes

[valanto]

@Akryum thanks for a great component! Just started a new vue3 project and added v-tooltip as mentioned above but even thought the text shows up I cannot set any global options and it appears unformatted and with a long delay to hide. Is there a way to fix this? What I have in my vue setup (Even without passing options I still get the same behaviour/display):

import VTooltip from "v-tooltip";
...
app.use(VTooltip, {
  defaultDelay: { show: 500, hide: 500 },
  classes: "bg-neutral-700 opacity-75 rounded-md text-white",
});
...

This is what I see:

[Akryum]

Those are old v2 options, so they won't work. As described in the first post, the new docs is here.

[Akryum]

it appears unformatted and with a long delay to hide

In your recording, it appears to have no CSS and simply gets destroyed after a few seconds.

[valanto]

Thanks for getting back to me. New instructions seem to work but just had to use yarn add v-tooltip@vue3 rather than yarn add v-tooltip@next

[SenDen11]

I've got the same issue with hide delay. The tooltip gets disappeared after about 5 sec (I guess its because of default value of disposeTimeout).
Seems like $_computeDelay function in Popper.js returns NaN as the second parameter for SetTimeout

The version of package is 4.0.0-beta.17

[bosquig]

Hi @Akryum

I think there might be a bug, or I don't get how I'm supposed to make it work with the new version (migrated from vue 2 to vue 3, so I had to migrate v-tooltip as well).

Env for testing: vite default template with vue 3 with compat build (compatConfig{MODE: 3}), tailwindcss and v-tooltip@vue3 (installed in vue with app.use(VTooltip))

<template>
  <div v-tooltip="{
      content: 'Mais si je suis là, regarde !',
      shown: isOpen,
      triggers: [''],
      placement: 'bottom',
    }"  @mouseleave="mouseleave" @mouseenter="mouseenter" class="max-w-16 whitespace-no-wrap overflow-ellipsis overflow-hidden">
    Il s'agit d'une fâcheuse histoire au sujet d'un texte qui n'avait plus de tooltip :(
  </div>
<template>
<script>
export default {
  data() {
    return {
      isOpen: false,
    }
  },
  methods: {
    mouseenter() {
      if (this.$el.offsetWidth < this.$el.scrollWidth) {
        this.isOpen = true;
      }
    },
    mouseleave() {
      this.isOpen = false;
    }
  },
}
</script>

throws the following error on mounting :

Uncaught TypeError: Cannot read property 'tooltip' of undefined
at bind (v-tooltip.js:99)

Sneak peak at this line:
value.shown ? tooltipApp.$refs.tooltip.show() : tooltipApp.$refs.tooltip.hide()
where tooltipApp.$refs is undefined (tooltipApp is using vue version 3.1.0-beta.5)

Note that if I replace "shown: isOpen, triggers: ['']" with "triggers: ['hover']" it works (but this is not what I want to do)

Thanks in advance !

EDIT: I managed to get the result I wanted with triggers: ['hover'] and the fact that nothing shows up if the tooltip content is an empty string.

v-tooltip={content: tooltipText, [...]}
data() {...tooltipText: ''}
mounted() { if(this.$el.offsetWidth < this.$el.scrollWidth) this.tooltipText = 'Mais si je suis là, regarde !' }

seems hacky though.

[Akryum]

Try triggers:[]

[bosquig]

Oh my god, I feel so dumb. The worst part is that I used triggers: [] succesfully in a v-dropdown previously...

Thanks :) !

[hottabych07]

Hi, I get an error when importing, who knows how to solve the problem?

[hottabych07]

Yes thanks, it works. Now I am trying to open a tooltip depending on isOpen and it throws an error: Cannot read property 'tooltip' of undefined

With "triggers: []", also not working...

This works in the old version. What could have gone wrong?

@Akryum help pls

[Akryum]

https://v-tooltip.netlify.app/guide/directive.html#manual-trigger-example

[damianosz]

@Akryum Why would I get this console warning:
[Vue warn]: Failed to resolve component: v-popover

When using:

<v-popover offset="16" popoverClass="multi-line" trigger="click" :autoHide="false">
    <!-- This will be the popover target (for the events and position) -->
    <button class="tooltip-target b3">Click me</button>

    <!-- This will be the content of the popover -->
    <template v-slot:popover>
        <p>
            Some text
        </p>

        <!-- You can put other components too -->
        <SzInput />
    </template>
</v-popover>

[Akryum]

There is no <v-popover> component anymore. See https://v-tooltip.netlify.app/guide/component.html

[Akryum]

You can also use themes to create something else than dropdown/tooltip/hover menu.

[whaliendev]

Hi, @Akryum
I encountered a problem when using v-tooltip@vue3, but I am not sure if it's a bug in v-tooltip.

I was migrating a vue-calendar-heatmap component into vue3, so I changed the dependency to V4, then the error occured:

It seems that the bug is in lifecycle hooks, then I did a single-step debugging, and then I found that it threw an error in the beforeMount lifecycle( i.e., the bind hook in vue2 ).
Specifically, it failed to mount to the target element, which is showd below:

What's more, I noticed that in the dom tree, the html structure is generated successfully, but the text content is not generated in the dom tree.

Can you figure out what's wrong with my project?

[Akryum]

The Migration guide (wip) is now available here!

[aloiseau17]

Hello @Akryum is there any news about the v3 release ? Is it still under beta version ?

Thank you :)

[RihanArfan]

I am beyond confused as releases show one thing (https://github.com/Akryum/floating-vue/releases), changelog shows another (https://github.com/Akryum/floating-vue/blob/main/CHANGELOG.md) and the documentation another (https://floating-vue.starpad.dev/guide/installation.html#compatibility). I'm hoping @Akryum can shed more light into what the currently developed version is.

[Akryum]

The latest versions are floating-vue 1 (for Vue 2) and floating-vue 2 (for Vue 3). The old GH releases are from v-tooltip. So both the CHANGELOG.md (listing versions for both floating-vue 1 and 2) and the docs are correct.