💬 Easy tooltips, popovers, dropdown for Vue 2.x

Related tags

vuejs2 tooltip
Overview

v-tooltip

Screenshot

Easy tooltips, popovers and dropdown with Popper.js

💚️ Become a Sponsor

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/[email protected]^2.0.0"></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">

⚠️ HTML is enabled in the tooltip by default. If you plan on using content coming from the users, please disable HTML parsing with the html global option to prevent XSS attacks:

import VTooltip from 'v-tooltip'
Vue.use(VTooltip, {
  defaultHtml: false,
})

Or directly on package:

import VTooltip from 'v-tooltip'
VTooltip.options.defaultHtml = false

You can then specify html: true on each tooltip you want to render HTML in. See below for more info on the tooltip options.

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'). Set it to false to append popover on target parent node.
  • 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)

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

    [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

    opened by sofuxro 50
  • I Installed the plugin but nothing happens

    I Installed the plugin but nothing happens

    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.

    opened by nagyszem22 35
  • Add prop for target reference

    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.

    feature-request 
    opened by dimensi 17
  • Webpack Production - gulp-uglify fails

    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)

    opened by lukepolo 16
  • Vue3 Support

    Vue3 Support

    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 
    opened by loren138 16
  • Mobile

    Mobile "touch" doesn't work properly

    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.

    opened by Sammyjo20 13
  • Scrolling issue

    Scrolling issue

    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.

    opened by luisgserrano 13
  • Customize order in placement option

    Customize order in placement option

    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 
    opened by vhsmoke 12
  • Closing tooltip on outside click

    Closing tooltip on outside click

    Hello, i have an tooltip target with trigger: 'click', and i need option to close the tooltip not only by clicking again on the target element (svg). There is anyway do that? Thx. :)

    opened by ballonura 11
  • chore(deps-dev): bump rollup from 2.42.0 to 2.55.0

    chore(deps-dev): bump rollup from 2.42.0 to 2.55.0

    Bumps rollup from 2.42.0 to 2.55.0.

    Release notes

    Sourced from rollup's releases.

    v2.55.0

    2021-07-28

    Features

    • Support default export live-bindings when generating ESM output (#4182)

    Bug Fixes

    • Always write ["default"] as computed property when used as named export (#4182)
    • Do not mask default export TDZ errors (#4182)

    v2.54.0

    2021-07-25

    Features

    • Extend UMD import.meta.url polyfill to support web workers (#4186)

    Bug Fixes

    • Resolve an issue where certain uses of classes could lead to an infinite recursion (#4189)

    Pull Requests

    v2.53.3

    2021-07-21

    Bug Fixes

    • Solve an issue that could lead to severe memory issues and crashes when there are a lot of hoisted variables (#4183)

    Pull Requests

    v2.53.2

    2021-07-15

    Bug Fixes

    • Identify additional TDZ situations in functions that are run more than once (#4177)
    • Fix a scoping issue when a variable inside a catch scope matches the scope parameter's name (#4178)

    Pull Requests

    v2.53.1

    2021-07-11

    Bug Fixes

    • Do not omit namespace reexports when treeshake is false (#4175)

    ... (truncated)

    Changelog

    Sourced from rollup's changelog.

    2.55.0

    2021-07-28

    Features

    • Support default export live-bindings when generating ESM output (#4182)

    Bug Fixes

    • Always write ["default"] as computed property when used as named export (#4182)
    • Do not mask default export TDZ errors (#4182)

    Pull Requests

    2.54.0

    2021-07-25

    Features

    • Extend UMD import.meta.url polyfill to support web workers (#4186)

    Bug Fixes

    • Resolve an issue where certain uses of classes could lead to an infinite recursion (#4189)

    Pull Requests

    2.53.3

    2021-07-21

    Bug Fixes

    • Solve an issue that could lead to severe memory issues and crashes when there are a lot of hoisted variables (#4183)

    Pull Requests

    2.53.2

    2021-07-15

    Bug Fixes

    • Identify additional TDZ situations in functions that are run more than once (#4177)
    • Fix a scoping issue when a variable inside a catch scope matches the scope parameter's name (#4178)

    Pull Requests

    2.53.1

    2021-07-11

    ... (truncated)

    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
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies 
    opened by dependabot-preview[bot] 0
  • In 4.0.0-alpha.1 version it does not seem to respect to autoHide: false

    In 4.0.0-alpha.1 version it does not seem to respect to autoHide: false

    It keeps auto-hiding even with autoHide: false

    opened by damianosz 3
  • chore(deps-dev): bump @rollup/plugin-commonjs from 16.0.0 to 19.0.2

    chore(deps-dev): bump @rollup/plugin-commonjs from 16.0.0 to 19.0.2

    Bumps @rollup/plugin-commonjs from 16.0.0 to 19.0.2.

    Changelog

    Sourced from @​rollup/plugin-commonjs's changelog.

    v19.0.2

    2021-07-26

    Bugfixes

    • fix convert module.exports with __esModule property(#939) (#942)

    v19.0.1

    2021-07-15

    Bugfixes

    • fix: short-circuit to actual module entry point when using circular ref through a different entry (#888)

    v19.0.0

    2021-05-07

    Breaking Changes

    • feat!: Add support for circular dependencies (#658)

    v18.1.0

    2021-05-04

    Bugfixes

    • fix: idempotence issue (#871)

    Features

    • feat: Add defaultIsModuleExports option to match Node.js behavior (#838)

    v18.0.0

    2021-03-26

    Breaking Changes

    • feat!: Add ignore-dynamic-requires option (#819)

    Bugfixes

    • fix: isRestorableCompiledEsm should also trigger code transform (#816)

    v17.1.0

    ... (truncated)

    Commits
    • e6e019e chore(release): commonjs v19.0.2
    • 4885d59 feat(dsv,dynamic-import-vars,image,legacy,multi-entry,strip,sucrase,url,yaml)...
    • 7757aeb fix(commonjs): convert module.exports with __esModule property(#939) (#942)
    • e32a9e9 chore(repo): update linting, prettier configuration
    • 8205497 chore(repo): automatically publish packages (#940)
    • b63fc48 chore(release): commonjs v19.0.1
    • c954336 fix(commonjs): short-circuit to actual module entry point when using circular...
    • 3ec3cef chore(release): commonjs v19.0.0
    • 5fe760b feat(commonjs)!: Add support for circular dependencies (#658)
    • bf112f9 chore(release): commonjs v18.1.0
    • 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
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    dependencies 
    opened by dependabot-preview[bot] 0
  • Added non-passive event listener to a scroll-blocking 'touchstart' event

    Added non-passive event listener to a scroll-blocking 'touchstart' event

    Hi, thank you for this great plugin!

    I would like to ask about a console warning i have in Chrome (Version 92.0.4515.107 (Official Build) (x86_64)) on OSX 11.2.3 (20D91), I'm using v-tooltip-4.0.0-alpha.1 and enabled the plugin globally like so: https://github.com/Akryum/v-tooltip/blob/vue3/packages/docs/src/guide/installation.md#node

    The warning:

    [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

    It's pointing to this line: v-tooltip.esm.js?e37d:991

    Stack trace:

    eval | @ | v-tooltip.esm.js?e37d:991
    -- | -- | --
      | eval | @ | v-tooltip.esm.js?e37d:990
      | addEvents | @ | v-tooltip.esm.js?e37d:980
      | $_addEventListeners | @ | v-tooltip.esm.js?e37d:1010
      | init | @ | v-tooltip.esm.js?e37d:682
      | mounted | @ | v-tooltip.esm.js?e37d:624
      | callWithErrorHandling | @ | runtime-core.esm-bundler.js?5c40:155
      | callWithAsyncErrorHandling | @ | runtime-core.esm-bundler.js?5c40:164
      | hook.__weh.hook.__weh | @ | runtime-core.esm-bundler.js?5c40:2910
      | flushPostFlushCbs | @ | runtime-core.esm-bundler.js?5c40:358
      | render | @ | runtime-core.esm-bundler.js?5c40:5812
      | mount | @ | runtime-core.esm-bundler.js?5c40:4085
      | app.mount | @ | runtime-dom.esm-bundler.js?830f:1322
      | createTooltip | @ | v-tooltip.esm.js?e37d:1650
      | bind | @ | v-tooltip.esm.js?e37d:1683
      | callWithErrorHandling | @ | runtime-core.esm-bundler.js?5c40:155
      | callWithAsyncErrorHandling | @ | runtime-core.esm-bundler.js?5c40:164
      | invokeDirectiveHook | @ | runtime-core.esm-bundler.js?5c40:3952
      | mountElement | @ | runtime-core.esm-bundler.js?5c40:4831
      | processElement | @ | runtime-core.esm-bundler.js?5c40:4773
      | patch | @ | runtime-core.esm-bundler.js?5c40:4681
      | mountChildren | @ | runtime-core.esm-bundler.js?5c40:4880
      | mountElement | @ | runtime-core.esm-bundler.js?5c40:4801
      | processElement | @ | runtime-core.esm-bundler.js?5c40:4773
      | patch | @ | runtime-core.esm-bundler.js?5c40:4681
      | mountChildren | @ | runtime-core.esm-bundler.js?5c40:4880
      | mountElement | @ | runtime-core.esm-bundler.js?5c40:4801
      | processElement | @ | runtime-core.esm-bundler.js?5c40:4773
      | patch | @ | runtime-core.esm-bundler.js?5c40:4681
      | componentEffect | @ | runtime-core.esm-bundler.js?5c40:5227
    

    Is this something I should be worried about?

    opened by ilyen85 0
  • [V4] Vue dev tools many VTooltipDirective layers

    [V4] Vue dev tools many VTooltipDirective layers

    Despite app there are many tooltips layers, is it normal? Isn't it be included in app? https://imgur.com/a/tRIGItb

    opened by xxSkyy 0
  • (vue3) fix: update tooltip when options change

    (vue3) fix: update tooltip when options change

    Currently, when you update the tooltip options the rendered tooltip does not update. This PR will make sure that the tooltip directive will get the updated options.

    opened by jaulz 0
  • v-close-popper doesn't seem to be working on v4

    v-close-popper doesn't seem to be working on v4

    Hi, I'm testing the [email protected] v4.0.0-alpha.1 following the migration guide here

      <VDropdown
        :triggers="['hover', 'focus']"
        boundary="body"
        :popper-options="{ preventOverflow: true }"
      >
        <a>Awiwi</a>
    
        <template #popper>
         I'm a popover
          <button v-close-popper>X</button>
        </template>
      </VDropdown>
    

    I don't know if I'm applying the v-close-popper directive correctly, but doesn't seems to work.

    Reproduction link:

    https://codesandbox.io/s/peaceful-morning-f0724?file=/src/App.vue:164-495

    bug v4 
    opened by alvarosaburido 0
  • Tooltip badplaced with dynamic content

    Tooltip badplaced with dynamic content

    For tooltips with dynamic content, I mean, those tooltips which request data to the server, after the data is received and when the tooltip content is filled, it is expanded to a wrong possition. An example.

    When you place the cursor over info icon, the tooltip is opened and a request to the backend is done to get the information. In the following screenshot it is waiting the response: image

    When the text is received, the tooltip content is filled and here goes the problem, it is expanded downward rather than expanded upward: image

    So the tooltip is badplaced.

    opened by manumora 0
  • Global Configuration Not Impacting Tooltip

    Global Configuration Not Impacting Tooltip

    I am using your Vue 3 version of V-tooltip and have tried to change the delay in a v-tooltip boot file with the following code:

    const options = {
        themes: {
          tooltip: {
            delay: { show: 5, hide: 1500 }
          }
        }
      }
      app.use(VTooltip, options)
      app.directive('tooltip', VTooltip)
    

    This is not impacting the tooltip. However, if I add the delay in-line as follows it works:

    button.cursor-pointer.ml-1(
     v-tooltip.bottom="{content: `Coaches: ${getCoaches(game.visitorTeam.coaches)}`,  delay: { show: 5, hide: 1500 }}"
    )
    

    We need a similar change to configuration for each tooltip and would prefer to apply the change globally. Are global configurations working with Vue 3? If so, how do I need to change our code in order to apply them?

    Thank you!

    opened by LinnaeK 0
  • Cannot read property 'theme' of undefined

    Cannot read property 'theme' of undefined

    ERROR in ./node_modules/v-tooltip/dist/v-tooltip.css friendly-errors 12:18:01

     ERROR  in ./node_modules/v-tooltip/dist/v-tooltip.css                                                                                                                                                                                                                   friendly-errors 12:18:01
    
    Module build failed (from ./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):                                                                                                                                                                        friendly-errors 12:18:01
    TypeError: Cannot read property 'theme' of undefined
        at _default (aa-ts/node_modules/@nuxtjs/tailwindcss/node_modules/tailwindcss/lib/lib/substituteScreenAtRules.js:16:5)
        at aa-ts/node_modules/@nuxtjs/tailwindcss/node_modules/@tailwindcss/jit/src/index.js:50:11
        at LazyResult.runOnRoot (aa-ts/node_modules/@nuxt/postcss8/node_modules/postcss/lib/lazy-result.js:339:16)
        at LazyResult.runAsync (aa-ts/node_modules/@nuxt/postcss8/node_modules/postcss/lib/lazy-result.js:391:26)
        at async Object.loader (aa-ts/node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/index.js:95:14)
                                                                                                                                                                                                                                                                             friendly-errors 12:18:01
     @ ./node_modules/v-tooltip/dist/v-tooltip.css 4:14-168 15:3-20:5 16:22-176
     @ ./plugins/v-tooltip.ts
     @ ./.nuxt/index.js
     @ ./.nuxt/client.js
    
    opened by productfrontenddeveloper 0
Releases(v2.1.3)
  • v2.1.3(Mar 19, 2021)

  • v2.1.2(Jan 4, 2021)

  • v2.1.1(Dec 31, 2020)

  • v2.1.0(Dec 30, 2020)

    Fixed

    • types: top level declaration, closes #459 (#462)
    • Add guards for popperInstance (#567)
    • don't include lodash in es build, closes #541
    • licence, closes #331
    • no component fade-in, closes #500
    • tooltip: apply delay to self events, closes #428
    • spread on string not working in IE, closes #323
    • only put aria-describedby if open, closes #432

    New

    • ariaId, closes #379
    • Expose isOpen in the popover slot (#507)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.3(Jan 20, 2020)

    Fixed

    • ts: added some types (#396)
    • tooltip in separate window (#356)
    • When the classes of the v-tooltip instruction are passed in the form of an array, the tooltip flashes. (#300)

    Other

    • Updated dependencies
    • Fix package.json license information (#291)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Apr 28, 2019)

    New

    • Add popover openClass prop + default value (#156)

    Fixed

    • SVGElement doesn't have prototype, closes #246
    • call _setContent after popper instance is created, closes #254
    • rollup-plugin-vue generated code not transpiled by babel, closes #239
    • manual tooltip closing on document touch, closes #158
    • check for contains before requestAnimationFrame, closes #253
    Source code(tar.gz)
    Source code(zip)
  • v2.0.1(Apr 12, 2019)

  • v2.0.0(Apr 11, 2019)

    New

    • Popover: close with [esc]
    • Tooltip: remove title attribute, closes #183

    Fixed

    • Transform arrow functions into class methods (#152)
    • prevent popovers from staying open when moving mouse too quickly (#228)
    • Popover: hide when deactivated
    • Popover: use div instead of span, closes #123
    • Tooltip: bind show and hide methods, fix _hide is not a function
    • Tooltip: properly remove aria-describedby when tooltip is removed from DOM, closes #191
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.32(May 6, 2018)

    New

    Directive:

    • html option
    • hideOnTargetClick option

    Component:

    • apply-show and apply-hide which take delays into account

    Fixed & Improved

    • #116 via #115
    • #74 via #112
    • Arrow z-index #100
    • #103 via #108
    • #80
    • #85
    • #59
    • #87
    • #93
    • #96
    • #98
    • #101
    • #102
    • #110
    • #118
    • #103
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.31(Feb 5, 2018)

  • v2.0.0-rc.30(Jan 22, 2018)

  • v2.0.0-rc.28(Jan 22, 2018)

    New

    • Directive: content can now accept a Promise for async content loading (docs)
    • Directive: loadingClass and loadingContent options
    • Popover: open-group class to keep multiple popovers open (see demos)
    • v-close-popover: all modifier to close all the popovers in the page
    • createTooltip and destroyTooltip are exported for manual JS usage

    Fixed

    • v-close-popover was unintentionally closing all the popovers in the page by default--now only the containing popover
    • Popover misc fixes
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.27(Jan 22, 2018)

  • v2.0.0-rc.26(Jan 12, 2018)

  • v2.0.0-rc.25(Nov 23, 2017)

    New

    • v-close-popover directive to close the popover on element click (docs, example). It implements the event.closePopover = true feature in a proper way to handle mobiles.

    Improved

    • Plugin options can now directly changed on the package default export (docs).
    • Popover: global events optimizations

    Fixed

    • Popover: autoHide prop set to false no longer blocks the event.closePopover = true feature.
    • Popover: mobile fixes
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.24(Nov 23, 2017)

    New

    New features have landed to help change all the CSS classes in case of conflicts with other libraries (looking at you bootstrap).

    • Tooltip arrowSelector and innerSelector options (and corresponding global options).
    • Popover popoverBaseClass, popoverInnerClass, popoverWrapperClass and popoverArrowClass props (and corresponding global options).

    Other new features:

    • Popover disabled prop.

    Improvements

    • Popover: improvements has been made to internals regarding the show and hide actions.
    • Better demo design.

    Fixed

    • SVG issues #67 #69
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.23(Nov 20, 2017)

    Improved

    • Use passive: true on touch events when supported.

    Fixed

    • If an element that should close the popover is positioned over the popover target, it would immediatly re-open the popover on iOS.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.22(Nov 16, 2017)

  • v2.0.0-rc.21(Nov 16, 2017)

  • v2.0.0-rc.19(Nov 14, 2017)

    Improved

    • Better performance by using mouseover instead of mouseenter.

    Fixed

    • Fixed tooltips not disappearing #62
    • Fixed a crash in Popover.vue
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.18(Nov 9, 2017)

    New

    • targetClasses option to add CSS classes to the target element of the tooltip if it will show one.
    • defaultTargetClasses global option.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.17(Nov 9, 2017)

  • v2.0.0-rc.16(Nov 7, 2017)

    Improved

    • New <div class="wrapper"> element wrapping the popover inner and the arrow (to allow transform transitions).

    Fixed

    • Popover not shown if open prop is true when created #61
    • Other misc. issues
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.11(Nov 2, 2017)

  • v2.0.0-rc.10(Nov 2, 2017)

  • v2.0.0-rc.9(Nov 2, 2017)

  • v2.0.0-rc.8(Oct 24, 2017)

  • v2.0.0-rc.7(Oct 24, 2017)

  • v2.0.0-rc.6(Oct 24, 2017)

    ⚠️ Potential Breaking Change

    • No longer have a dependency on tooltip.js, but still on popper.js. If you use v-tooltip in a webpage, you just have to remove the script tag that includes tooltip.js (you still need the script tag for both popper.js and v-tooltip).

    New

    • Disable auto dispose by setting the option to null.

    Improved

    • Forked tooltip.js to make changing its internals easier.
    • The tooltip will now be initially hidden when created, and shown the next frame so that 'appearing' CSS transitions will play.

    Fixed

    • If a 'show' delay is set, the tooltip no longer appears after the user leaves the target element (the timer is now correctly cleared).
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-rc.1(Sep 26, 2017)

Owner
Guillaume Chau
Web & JavaScript enthusiast, @vuejs core team.
Guillaume Chau
Vue.js 2 library for dropdowns / popovers / tooltips

Vue.js popover Live demo here Install: npm install vue-js-popover

Yev Vlasenko 402 Jul 22, 2021
Vue.js tooltip directive. Easy to use, configure and style

vue-directive-tooltip Vue.js tooltip directive (based on Popper.js) Installation yarn add vue-directive-tooltip or npm install vue-directive-tooltip -

Laurent Blanes 162 May 13, 2021
:whale: VueJS popover component based popper.js

vue-popperjs VueJS popover component based on popper.js Example jsFiddle Install CDN Recommended: https://unpkg.com/vue-popperjs, which will reflect t

Igor Ognichenko 386 Jul 24, 2021
Vue.js wrapper for SweetAlert2. With support SSR.

A convenient wrapper for sweetalert2.

Aleksey Pivkin 476 Jul 14, 2021
VueJS Tooltip powered by Tippy.js

VueJS Tooltip powered by Tippy.js

Georges KABBOUCHI 436 Jul 23, 2021
A preview component of the creator with more information on hover.

A preview component of the creator with more information on hover.

Gobie Nanthakumar 6 Jun 20, 2021
Popper.js directive for Vue.js

vue-popper-component Simple Vue.js component for Popper.js plugin. Demos: https://antongorodezkiy.github.io/vue-popper-component/ Dependencies: Vue 1.

Eduard K 46 Apr 21, 2021