Vuejs-V tooltip v3.0.0-beta.1: v-tooltip - Easy tooltips with Vue 2.x.

icon
Latest Release: v3.0.0-beta.1

logo

Welcome to v-tooltip V3! This is a new rewrite of the library - learn more about it here

Highlights

  • Upgraded to PopperJS 2
  • ~30% smaller!
  • Theming system
  • Unified API between directive & component
  • Compatible with Vue 2 and Vue 3!

Learn more

Compatibility

| v-tooltip | NPM Tag | Vue compatibility | | --------- | ------- | ----------------- | | 2.x | latest | 2.x | | 3.x | next | 2.x | | 4.x | vue3 | 3.x |

Source code(tar.gz)
Source code(zip)

v-tooltip

Screenshot

Easy tooltips, popovers and dropdown with Popper.js

Become a Patreon

Sponsors

sponsors logos




Useful Links


Table of Contents


Getting started

This package offers two different usages: directive or component. You can use them to create tooltips, popovers or all kinds of dropdowns.

  1. Install the plugin:
npm install --save v-tooltip
  1. Add the plugin into your app:
import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

More info on installation

  1. Add some style to your liking.

  2. Use the v-tooltip directive:

<button v-tooltip="'You have ' + count + ' new messages.'">

More info on the directive

  1. Use the v-popover component:
<v-popover>
  <!-- This will be the popover target (for the events and position) -->
  <button>Click me</button>
  <!-- This will be the content of the popover -->
  <MyAwesomeComponent slot="popover"/>
</v-popover>

More info on the component


Installation

Npm

npm install --save v-tooltip

Install the plugin into Vue:

import Vue from 'vue'
import VTooltip from 'v-tooltip'

Vue.use(VTooltip)

Or use the directives and components directly:

import Vue from 'vue'
import { VTooltip, VPopover, VClosePopover } from 'v-tooltip'

Vue.directive('tooltip', VTooltip)
Vue.directive('close-popover', VClosePopover)
Vue.component('v-popover', VPopover)

Browser

Include v-tooltip in the page.

<script src="https://unpkg.com/v-tooltip"></script>

If Vue is detected in the Page, the plugin is installed automatically.

Manually install the plugin into Vue:

Vue.use(VTooltip)

Or use the directives and components directly:

Vue.directive('tooltip', VTooltip.VTooltip)
Vue.directive('close-popover', VTooltip.VClosePopover)
Vue.component('v-popover', VTooltip.VPopover)

Usage

Directive

In the template, use the v-tooltip directive:

<button v-tooltip="'You have ' + count + ' new messages.'">

Of course, you can use a reactive property:

<button v-tooltip="tooltipContent">

You can specify the tooltip position as a modifier:

<button v-tooltip.bottom-start="'You have ' + count + ' new messages.'">

The available positions are:

  • 'auto'
  • 'auto-start'
  • 'auto-end'
  • 'top'
  • 'top-start'
  • 'top-end'
  • 'right'
  • 'right-start'
  • 'right-end'
  • 'bottom'
  • 'bottom-start'
  • 'bottom-end'
  • 'left'
  • 'left-start'
  • 'left-end'

⚠️ You need to add style to the tooltips: examples.

Object notation

You can use an object instead of a simple string:

<button v-tooltip="{ content: 'You have ' + count + ' new messages.' }">

Dynamic CSS classes

You can set the tooltip css classes dynamically with the object notation:

<button v-tooltip="{ content: 'You have ' + count + ' new messages.', classes: ['a', 'b'] }">

This will replace the default CSS classe with 'a b' on the tooltip element.

You can also use the standard class notation:

<button v-tooltip="{ content: 'You have ' + count + ' new messages.', classes: 'a b' }">

Or a reactive property:

<button v-tooltip="{ content: 'You have ' + count + ' new messages.', classes: tooltipClasses }">

Other options

<button v-tooltip="options">
  • content - HTML text to be displayed in the tooltip. Can also be a function that returns the content or a Promise.
  • classes - (see above)
  • targetClasses - CSS classes added to the target element of the tooltip.
  • html - Boolean: allow HTML tooltip content.
  • delay - Show/Hide delay, or object: { show: 500, hide: 100 } (ms).
  • placement - (see above)
  • trigger - Events triggering the tooltip separated with spaces: 'hover', 'click', 'focus' or 'manual' ('manual' can't be combined with any other event).
  • show - Boolean to manually open or hide the tooltip.
  • offset - Offset of the position (px).
  • container - Selector: Container where the tooltip will be appended (e.g. 'body').
  • boundariesElement - DOM element for the tooltip boundaries.
  • template - HTML template of the tooltip.
  • arrowSelector - CSS selector to get the arrow element in the tooltip template.
  • innerSelector - CSS selector to get the inner content element in the tooltip template.
  • autoHide - Boolean: automatically close the tooltip on mouseover.
  • hideOnTargetClick - Boolean: automatically close the tooltip on target click.
  • loadingClass - CSS classes added to the tooltip when content is loading.
  • loadingContent - Same as content, used when the actual tooltip content is loading.
  • popperOptions - Other Popper.js options.

You can change the default values in the Global options.

Async content example

The content option accepts a promise:

<button
  v-tooltip="{
    content: asyncMethod(),
    loadingContent: 'Please wait...',
    loadingClass: 'content-is-loading',
  }"
>Hover me!</button>

Manual trigger example

Use the trigger and show options:

<button
  v-tooltip="{
    content: 'Tooltip content here',
    show: isOpen,
    trigger: 'manual',
  }"
>A button</button>

Tooltip auto-hiding

By default, if trigger contains 'hover', the tooltip is automatically hidden on hover or click. To disable this, set the autoHide option to false:

VTooltip.options.autoHide = false

Disabling tooltips

On mobile, you can disable the tooltips with the VTooltip.enabled property:

VTooltip.enabled = window.innerWidth > 768

Component

If you need to display components inside the tooltip (or popover/dropdown, technically it's the same ? ), use the v-popover component:

<v-popover
  offset="16"
>
  <!-- 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 slot="popover">
    <input class="tooltip-content" v-model="msg" placeholder="Tooltip content" />
    <p>
      {{ msg }}
    </p>

    <!-- You can put other components too -->
    <ExampleComponent char="=" />
  </template>
</v-popover>

By default, the popover will have the tooltip and popover classes, so you can easily override the style:

.tooltip {
  // ...

  &.popover {
    $color: #f9f9f9;

    .popover-inner {
      background: $color;
      color: black;
      padding: 24px;
      border-radius: 5px;
      box-shadow: 0 5px 30px rgba(black, .1);
    }

    .popover-arrow {
      border-color: $color;
    }
  }
}

⚠️ Set the arrow element z-index CSS property:

.tooltip-arrow {
  z-index: 1;
}

Popover Component Reference

Props:

  • open - Boolean that shows or hide the popover.
  • disabled - Boolean that disables the popover. If it was already open, it will be closed.
  • placement - (see above)
  • delay - (see above)
  • trigger - (see above)
  • offset - (see above)
  • container - (see above)
  • boundariesElement - (see above)
  • popperOptions - (see above)
  • popoverClass - Classes applied to the popover element. Use this to apply different themes to the popover.
  • popoverBaseClass - Base classes applied to the popover element (defaults to 'tooltip popover').
  • popoverWrapperClass - Class of the element that contains the arrow and inner content.
  • popoverArrowClass - Class of the arrow element.
  • popoverInnerClass - Class of the inner content element.
  • autoHide - Hide the popover if clicked outside.
  • handleResize - Automatically update the popover position if its size changes.
  • openGroup - If set, will close all the open popovers that have a different open-group value or unset.
  • openClass - Class put on the popover when it's open.

You can change the default values in the Global options.

Events:

  • update:open(Boolean) - This allow you to use the .sync modifier on the open prop.
  • show
  • apply-show - Emitted after the show delay
  • hide
  • apply-hide - Emitted after the hide delay
  • dispose
  • auto-hide - Emitted when the popover is closed if clicked outside.
  • close-directive - Emitted when the popover is closed with the Close directive.
  • close-group - Emitted when the popover is closed because a popover of another open-group was shown.
  • resize - Emitted when the content size changes. You must set the handleResize prop to true.

Disable popover

<v-popover :disabled="isDisabled"></v-popover>
data () {
  return {
    isDisabled: true,
  }
}

Close directive

Use the v-close-popover directive on an element inside the popover to close it when the element is clicked (or touched on mobile):

<v-popover>
  <button>Click me</button>

  <template slot="popover">
    <a v-close-popover>Close</a>
  </template>
</v-popover>

You can also set it to true or false to enable or disable the directive (enabled by default):

<a v-close-popover="false">Close</a>
<a v-close-popover="true">Close</a>

You can also use a property:

<a v-close-popover="myBooleanProp">Close</a>
data () {
  return {
    myBooleanProp: true,
  }
}

Close all the popovers in the page with the all modifier:

<a v-close-popover.all>Close All</a>

Global options

The default global options are:

{
  // Default tooltip placement relative to target element
  defaultPlacement: 'top',
  // Default CSS classes applied to the tooltip element
  defaultClass: 'vue-tooltip-theme',
  // Default CSS classes applied to the target element of the tooltip
  defaultTargetClass: 'has-tooltip',
  // Is the content HTML by default?
  defaultHtml: true,
  // Default HTML template of the tooltip element
  // It must include `tooltip-arrow` & `tooltip-inner` CSS classes (can be configured, see below)
  // Change if the classes conflict with other libraries (for example bootstrap)
  defaultTemplate: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
  // Selector used to get the arrow element in the tooltip template
  defaultArrowSelector: '.tooltip-arrow, .tooltip__arrow',
  // Selector used to get the inner content element in the tooltip template
  defaultInnerSelector: '.tooltip-inner, .tooltip__inner',
  // Delay (ms)
  defaultDelay: 0,
  // Default events that trigger the tooltip
  defaultTrigger: 'hover focus',
  // Default position offset (px)
  defaultOffset: 0,
  // Default container where the tooltip will be appended
  defaultContainer: 'body',
  defaultBoundariesElement: undefined,
  defaultPopperOptions: {},
  // Class added when content is loading
  defaultLoadingClass: 'tooltip-loading',
  // Displayed when tooltip content is loading
  defaultLoadingContent: '...',
  // Hide on mouseover tooltip
  autoHide: true,
  // Close tooltip on click on tooltip target?
  defaultHideOnTargetClick: true,
  // Auto destroy tooltip DOM nodes (ms)
  disposeTimeout: 5000,
  // Options for popover
  popover: {
    defaultPlacement: 'bottom',
    // Use the `popoverClass` prop for theming
    defaultClass: 'vue-popover-theme',
    // Base class (change if conflicts with other libraries)
    defaultBaseClass: 'tooltip popover',
    // Wrapper class (contains arrow and inner)
    defaultWrapperClass: 'wrapper',
    // Inner content class
    defaultInnerClass: 'tooltip-inner popover-inner',
    // Arrow class
    defaultArrowClass: 'tooltip-arrow popover-arrow',
    // Class added when popover is open
    defaultOpenClass: 'open',
    defaultDelay: 0,
    defaultTrigger: 'click',
    defaultOffset: 0,
    defaultContainer: 'body',
    defaultBoundariesElement: undefined,
    defaultPopperOptions: {},
    // Hides if clicked outside of popover
    defaultAutoHide: true,
    // Update popper on content resize
    defaultHandleResize: true,
  },
}

You can change the options during install with the arguments:

import VTooltip from 'v-tooltip'
Vue.use(VTooltip, options)

Or directly on package:

import VTooltip from 'v-tooltip'
// Set custom CSS class
VTooltip.options.defaultClass = 'my-tooltip'

Style Examples

Bellow are some examples of style you need. Here is another example, used in the live demo.

Sass / Less

.tooltip {
  display: block !important;
  z-index: 10000;

  .tooltip-inner {
    background: black;
    color: white;
    border-radius: 16px;
    padding: 5px 10px 4px;
  }

  .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: black;
    z-index: 1;
  }

  &[x-placement^="top"] {
    margin-bottom: 5px;

    .tooltip-arrow {
      border-width: 5px 5px 0 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      bottom: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="bottom"] {
    margin-top: 5px;

    .tooltip-arrow {
      border-width: 0 5px 5px 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="right"] {
    margin-left: 5px;

    .tooltip-arrow {
      border-width: 5px 5px 5px 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[x-placement^="left"] {
    margin-right: 5px;

    .tooltip-arrow {
      border-width: 5px 0 5px 5px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &.popover {
    $color: #f9f9f9;

    .popover-inner {
      background: $color;
      color: black;
      padding: 24px;
      border-radius: 5px;
      box-shadow: 0 5px 30px rgba(black, .1);
    }

    .popover-arrow {
      border-color: $color;
    }
  }

  &[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
}

CSS

.tooltip {
  display: block !important;
  z-index: 10000;
}

.tooltip .tooltip-inner {
  background: black;
  color: white;
  border-radius: 16px;
  padding: 5px 10px 4px;
}

.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: black;
  z-index: 1;
}

.tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}

.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}

.tooltip[x-placement^="bottom"] .tooltip-arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^="right"] {
  margin-left: 5px;
}

.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.tooltip[x-placement^="left"] {
  margin-right: 5px;
}

.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.tooltip.popover .popover-inner {
  background: #f9f9f9;
  color: black;
  padding: 24px;
  border-radius: 5px;
  box-shadow: 0 5px 30px rgba(black, .1);
}

.tooltip.popover .popover-arrow {
  border-color: #f9f9f9;
}

.tooltip[aria-hidden='true'] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
}

.tooltip[aria-hidden='false'] {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s;
}

LICENCE MIT - Created by Guillaume CHAU (@Akryum)

Comments

  • chore(deps): bump url-parse from 1.5.1 to 1.5.3
    chore(deps): bump url-parse from 1.5.1 to 1.5.3

    Oct 5, 2021

    Bumps url-parse from 1.5.1 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Initial arrow placement issue (max-content issue?)
    Initial arrow placement issue (max-content issue?)

    Oct 11, 2021

    I am using the v4 vue-3 version: 4.0.0-alpha.1

    How are we supposed to have full-width content when the wrapper has width: max-content?

    If i dont overwrite that property, then i cant make my input-field use all the width possibly:

    image

    If i then overwrite the width with:

    .v-popper { width: 100% !important; }

    Then the arrow still uses the previous width as placement:

    image

    If i however, add a 500ms "show" delay, it works fine.

    Reply
  • chore(deps): bump tar from 4.4.13 to 4.4.19
    chore(deps): bump tar from 4.4.13 to 4.4.19

    Nov 2, 2021

    Bumps tar from 4.4.13 to 4.4.19.

    Commits
    • 9a6faa0 4.4.19
    • 70ef812 drop dirCache for symlink on all platforms
    • 3e35515 4.4.18
    • 52b09e3 fix: prevent path escape using drive-relative paths
    • bb93ba2 fix: reserve paths properly for unicode, windows
    • 2f1bca0 fix: prune dirCache properly for unicode, windows
    • 9bf70a8 4.4.17
    • 6aafff0 fix: skip extract if linkpath is stripped entirely
    • 5c5059a fix: reserve paths case-insensitively
    • fd6accb 4.4.16
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • chore(deps): bump trim-newlines from 3.0.0 to 3.0.1
    chore(deps): bump trim-newlines from 3.0.0 to 3.0.1

    Nov 2, 2021

    Bumps trim-newlines from 3.0.0 to 3.0.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • How to add new theme or update config in nuxt3
    How to add new theme or update config in nuxt3

    Nov 24, 2021

    Hi,

    I am new to Nuxt and want to use v-tooltip. I tried adding my new theme but failed with error and later I just tried simple config but it wasn't updating in nuxt3. Here's my config:

    export default defineNuxtConfig({
      buildModules: [
        ['v-tooltip/nuxt', {
          offset: [0, 52],
          disposeTimeout: 500000,
        }],
      ],
    })
    

    With the above config I am trying like below:

    <button v-tooltip="'You have new messages.'">
      View
    </button>
    

    but offset & disposeTimeout options aren't working 🤔

    Thanks.

    Reply
  • Container can accept a callback
    Container can accept a callback

    Dec 20, 2021

    Right now it’s not possible to specify container for a tooltip in the Shadow DOM. The solution is to accept a callback in the container option in order to resolve the element/selector dynamically right before appending the popper node. This pull request should resolve https://github.com/Akryum/v-tooltip/issues/346 for the next branch.

    Reply
  • chore(deps): bump follow-redirects from 1.13.1 to 1.14.7
    chore(deps): bump follow-redirects from 1.13.1 to 1.14.7

    Jan 13, 2022

    Bumps follow-redirects from 1.13.1 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • vue 3 tooltip component encounters null reference in combination with vue-router
    vue 3 tooltip component encounters null reference in combination with vue-router

    Jan 13, 2022

    There's an issue where under very particular circumstances it seems like vue-router can cause the watch on the popper triggers prop to execute before the component has been mounted, which results in an error because the $_events array is null.

    The issue can be reproduced in the attached application by running the vue-cli dev server (there's a serve script in the package.json to do this) then loading the page in a browser. The error occurs immediately.

    The error occurs in both Chrome and Firefox.

    tooltip-issue.zip

    Reply
  • chore(deps): bump prismjs from 1.23.0 to 1.26.0
    chore(deps): bump prismjs from 1.23.0 to 1.26.0

    Jan 18, 2022

    Bumps prismjs from 1.23.0 to 1.26.0.

    Release notes

    Sourced from prismjs's releases.

    v1.26.0

    Release 1.26.0

    v1.25.0

    Release 1.25.0

    v1.24.1

    Release 1.24.1

    v1.24.0

    Release 1.24.0

    Changelog

    Sourced from prismjs's changelog.

    1.26.0 (2022-01-06)

    New components

    Updated components

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by rundevelopment, a new releaser for prismjs since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Not support Nuxt 3
    Not support Nuxt 3

    Jan 19, 2022

    Hi,

    I acted upon ur introduction to install floating-vue into Nuxt 3: https://v-tooltip.netlify.app/guide/installation.html#nuxt-3

    1. But when run 'nuxi dev', it fired the error:
    Screen Shot 2022-01-19 at 5 12 47 PM
    1. If I run 'nuxi build' then 'nuxi start', the error was shown:
    Screen Shot 2022-01-19 at 5 14 20 PM
    • It violate the new rules of Native ES module https://v3.nuxtjs.org/concepts/esm

    Please help to take a look. Thank u

    Reply
  • Hover bug with popover and tooltip
    Hover bug with popover and tooltip

    Feb 5, 2018

    When try to quickly navigate through the elements, the tooltip is not always closed. video

    bug 
    Reply
  • Customize order in placement option
    Customize order in placement option

    Apr 2, 2018

    It wolud be great if there will be possibility to set order for placement tooltip. For example: now I can set { placement: 'top' } or { placement: 'auto' }. And I want to set an array if priority, something like that: { placement: ['top', 'left', 'auto'] }. So if tooltip will go outside window, it will replaced in custom priority.

    feature-request 
    Reply
  • Mobile
    Mobile "touch" doesn't work properly

    Aug 21, 2018

    On mobile (I tested with my iPhone 8), you can tap on the trigger for the tooltip and the tooltip appears correctly, but after tapping away and tapping again, it doesn't appear.

    Reply
  • Scrolling issue
    Scrolling issue

    Aug 30, 2018

    Hi @Akryum ,

    My problem is that I have a list of boxes, very close between each other, and the popover should show when hovering each box. When I scroll very quickly, some popovers keep his open state as true and stay in the DOM. I need to scroll to that box and hover -> leave again for the popover disappear.

    Do you have a clue on this?

    Best regards, Luis Serrano.

    Reply
  • Manual option, but no details on how to trigger?
    Manual option, but no details on how to trigger?

    May 18, 2017

                                                                                                                                                                                                           
    Reply
  • Vue3 Support
    Vue3 Support

    Aug 13, 2020

    Is there a timeline for upgrading v-tooltip and v-popover to support Vue3?

    Vue3 is currently at Release Candidate 5 and is supposed to be released soon.

    enhancement v3 
    Reply
  • Webpack Production - gulp-uglify fails
    Webpack Production - gulp-uglify fails

    Dec 29, 2016

    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)

    Reply
  • Add prop for target reference
    Add prop for target reference

    Nov 7, 2017

    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.

    feature-request 
    Reply
  • I Installed the plugin but nothing happens
    I Installed the plugin but nothing happens

    Nov 21, 2017

    I did the following:

    1.) npm install --save v-tooltip 2.) then imported it in my bootstrap.js file (this file initiates vue in my project) import VTooltip from 'v-tooltip'; Vue.use(VTooltip); (of course Vue is defined, I import multiple other components in the same way)

    Nothing happens, I don't get any error messages.

    Reply
  • [Vue warn]: Failed to resolve directive: tooltip
    [Vue warn]: Failed to resolve directive: tooltip

    Oct 2, 2017

    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

    Reply