hekigan / vue-directive-tooltip Goto Github PK

Hi,

Would it be possible to add a disabled option ? Today there is visible, but it's only triggered when we have notrigger.

I only want to show the tooltip when my text is too long, and a way to disable the tooltip would be great.

The workaround I use is :

<button 
  v-tooltip.notrigger.top="{html:'tooltipContent', visible:showTooltip}"
  @mouseenter="showTooltip=needTooltip"
  @mouseleave="showTooltip=false"
  type="button">{{ text }}</button>

Thanks

Bug

     <vuetable .
            (1000 rows)
      >
    <div class="custom-actions" slot="actions" slot-scope="props">
      <button v-tooltip.notrigger="{ content: playbookInfo, visible: visibility[props.rowData._id] }"
        class="ti-more btn btn-outline-secondary btn-sm"
        round
        @click="onAction('view-item', props.rowData, props.rowIndex)" ></button>
      <button       class="ti-trash btn btn-outline-secondary btn-sm"
        round
        @click="onAction('delete-item', props.rowData, props.rowIndex)">       </button>
    </div>

data() {
return{
playbookInfo: {},
visibility: [],
}}

   async onAction (action, data, index) {
      if(action == 'view-item' ){
        let res
        try {
          res = await store.dispatch('dockerimages/playbookInfo', data)
        }catch (ex) {
          return
        }
        this.visibility={}
        this.playbookInfo={}
        this.playbookInfo=res.info
        this.visibility[res.data.playbookid]=true

Behaviour

Current:
Work perfectly with
v-tooltip.notrigger="{ content: playbookInfo, visible: visibility[props.rowData._id] }"
dont work with
v-tooltip.notrigger="{ html: 'imagesInfo', visible: visibility[props.rowData._id] }"

<div id="imagesInfo">
{{playbookInfo}}
</div>

Expected:
do work like does with
v-tooltip.notrigger="{ content: playbookInfo, visible: visibility[props.rowData._id] }"

i think its a bug.

i have some fields there are shown when the user interact over them.
<div id="tooltip" class="hidden">content to show or hide</div>
<template v-if="mycondition"> <span v-tooltip.html.top="{ html: 'tooltip' }">teste</span> </template> <template v-else> <span v-tooltip.html.top="{ html: 'tooltip' }">teste</span> </template>

but the dom node

Hello,

I'm not able the change the default configuration.

i tried with the folowing code:

import vueDirectiveTooltip from 'vue-directive-tooltip';

Vue.use(vueDirectiveTooltip, {
    delay: 200,
    placement: 'right',
    class: 'tooltip-red', // ex: 'tooltip-custom tooltip-other-custom'
    triggers: ['hover', 'focus'],
    offset: 5
});

When I use v-tooltip the placement is left and the color black.

What am I doing wrong?

Object doesn't support property or method 'replace' on Internet Explorer 11.

Bug:

What is the current behavior?:
Tooltip is not working.

[Vue warn]: Error in directive tooltip inserted hook: "TypeError: L’objet ne gère pas la propriété ou la méthode « includes »"

[Vue warn]: Error in directive tooltip unbind hook: "TypeError: Impossible d’obtenir la propriété « destroy » d’une référence null ou non définie"

**Browser Version:
Internet Explorer 11

This is my usage code:

<button type="button" class="btn-nth relative" v-tooltip="{content:'Notifications (N)', offset: 8}" @click="changeRoute('notifications')">
	<i class="v-icon v-bell-2" aria-hidden="true"></i>
	<span class="queue-number" v-show="unreadNotifications" v-text="unreadNotifications"></span>
</button>

Tooltip opens when I hover the router-link but closes after my hovering reaches the inside element which is home-icon.

Any way to work around this?

Thanks for the great job BTW.

Including vue-directive-tooltip in my project works fine in the browser because webpack can handle ES modules (export), but when I run my unit tests (in node) they fail because of Unexpected token export on node_modules/popper.js/dist/popper-utils.js:1002.

I believe this is because of vue-directive-tooltip's inclusion of popper.js/dist/popper-utils. Its inclusion of popper.js works fine because popper.js' package.json has a main and module property, letting the compiler/bundler choose which file to use. But importing the explicit /dist/popper-utils.js file requires ES module support.

I think switching this to popper.js/dist/umd/popper-utils would work, but then you wouldn't be able to leverage webpack's ES module support :(

Alternatively, perhaps we can just remove the dependency entirely, since it's just a set style function. Set the styles another way, or copy the utility function into this project?

Front-end development is fun... :(

When I'm overriding the default options when installing the plugin, all options are affected, than the 'placement'. I wanted to put default placement 'top', but it's 'auto'. If I put v-directive.top it is working.

Here is the code:

import Tooltip from 'vue-directive-tooltip' import 'vue-directive-tooltip/css/index.css' Vue.use(Tooltip, { delay: 100, position: 'top' })

Here is how I use it:

<li v-for="type in voteTypes" v-tooltip="{ content: getTitle(type.value) }"> ... </li>

The result: placement right and changes because it's auto. I also saw it in the html - x-placement="right"

I have a child component that contains v-tooltip. The parent component changes one of the props of the child component and depending on the value I want to change the text of v-tooltip. Now it can't

Code: v-tooltip.top="getTooltip()"

The prop is successfuly changed, so there is no a problem there.

When using the tooltip with the click trigger, the tooltip won't disappear after delay millis. This is a documented behaviour. I'd like to have an option to activate the autoclosing of the tooltip for the click event.

text-align: right;

i noticed that when the text align property is set to right, the directive does not line up anymore, it's strange

import Tooltip from 'vue-directive-tooltip'

Vue.use(Tooltip, {
    delay: 200,
    placement: 'top',
    class: 'our-tooltip',
    triggers: ['hover'],
    offset: 0
});

So this works great, but I'd like to extend the package to always use those defaults in every instance - our company has a lot of separate apps so we don't use the same instance of Vue. I've extended filters and components before, but I'm not finding anything on extending directives. Is it possible? Or do we just need to have Vue.use() on every app?

Hello, have you noticed the behavior of the tooltip on iPhone? It will prevent the click because on click it will first show the tooltip than you have to click again to actually do the action.

Do I have to configure something specific? Or what would be the best way to disable the tooltips on phone?

Thanks

Of the multiple tooltips found on vue awesome, this was the best one to fit my needs.

One slight issue... instead of this:

<span v-tooltip.bottom="'bottom'">bottom tooltip</span>

Can a position option be added?

<span v-tooltip="{content:'bottom tooltip', position: 'bottom'}">bottom tooltip</span>

This way, I can dynamically set the position from a computed property.

Many Thanks!

Hello, when using the directive on element with children, an error is thrown.

Please see http://jsfiddle.net/un65zfsj/

Uncaught TypeError: Cannot read property 'popper' of undefined
    at HTMLSpanElement.onMouseOver

In case of feature request, please add "[feature]" in the title
eg: [feature] would like to add this great idea

Bug

When submitting a bug, please use the template below to reproduce the bug on Codepen.
Bug with no example on Codepen will be most likely get closed.

Behaviour

Current:

Expected:

Please, provide the steps and use the template from the link below to reproduce the bug:

This template already has Vue.js and vue-directive-tooltip setup.
Just adjust the code to reproduce your issue.

https://codepen.io/hekigan/pen/BdjJxo

Please mention other relevant information:

• Browser Version:
• Operating System:

Feature

To complement delay to hide add a delay to show feature.

This feature would delay the appearance of a tooltip until the cursor had hovered over a element for a period of time.

This would provide help when a user dwells on an element and avoid popping tooltips when I just move my mouse across the screen.

Behaviour

Current: modifier variants for the position (ex. top.end, or top.start) do not work with offset.

Expected: I expect a v-tooltip.top.end with offset = 30 to be offset, at least in the major direction (top in this case).

view this code pen to see the issue: https://codepen.io/tylerwoodridge/pen/LzzVaO

Please mention other relevant information:

• Browser Version: Chrome v60.0.3112.113
• Operating System: macOS Sierra v10.12.6

Check this:
https://codepen.io/anon/pen/qXzxvq

class property does not seems to be updated at all.

Behaviour

Current:

The documentation at https://hekigan.github.io/vue-directive-tooltip cannot be scrolled in Safari on macOS — the page just bounces as if there were no more content. No error messages are logged to console.

Expected:

Scrolling works normally.

Please mention other relevant information:

• Browser Version: Safari 12.1.2
• Operating System: Mac OS X 10.14.6 (18G95)

This causes problems on smaller screens (for example, the installation page does not show the content after @import "~vue-directive-tooltip/dist/vueDirectiveTooltip.css"; on a 15" MacBook Pro's screen — if there is no external display, then the rest of the instructions can only be viewed by opening the Inspector and reading the source.

first of all, thanks for awesome plugin.

i want to say that there is no option to set tooltip's position on mobile.
for example: i set tooltip position right and it automatically set it's position left on mobile.
but i want it top.

do you plan to bring a feature like this?

Bug

Example: https://codepen.io/anon/pen/LegZBe

Behaviour

Current:

v-tooltip breaks when its value resolved to null or undefined.

Expected:

v-tooltip should wait until value is not null or undefined, then continue with normal behaviour.

Please mention other relevant information:

[Vue warn]: Error in directive tooltip inserted hook: \\"TypeError: Cannot read property \'delay\' of undefined\\"\\n\\nfound in\\n\\n---> ...

TypeError: Cannot read property \'delay\' of undefined\n    at filterBindings (webpack-internal:///503:2839:37)\n    at inserted (webpack-internal:///503:2817:31)\n    at callHook$1 (webpack-internal:///1:6147:7)\n    at callInsert (webpack-internal:///1:6089:9)\n    at wrappedHook (webpack-internal:///1:2039:10)\n    at Object.invoker [as insert] (webpack-internal:///1:1983:19)\n    at invokeInsertHook (webpack-internal:///1:5817:28)\n    at VueComponent.patch [as __patch__] (webpack-internal:///1:6036:5)\n    at VueComponent.Vue._update (webpack-internal:///1:2627:19)\n    at VueComponent.updateComponent (webpack-internal:///1:2745:10)',

[Vue warn]: Error in directive tooltip unbind hook: \\"TypeError: Cannot read property \'destroy\' of undefined\\"\\n\\nfound in\\n\\n---> ...

TypeError: Cannot read property \'destroy\' of undefined\n    at unbind (webpack-internal:///503:2832:28)\n    at callHook$1 (webpack-internal:///1:6147:7)\n    at _update (webpack-internal:///1:6111:9)\n    at updateDirectives (webpack-internal:///1:6053:5)\n    at Array.unbindDirectives (webpack-internal:///1:6047:5)\n    at invokeDestroyHook (webpack-internal:///1:5616:64)\n    at invokeDestroyHook (webpack-internal:///1:5620:9)\n    at invokeDestroyHook (webpack-internal:///1:5620:9)\n    at invokeDestroyHook (webpack-internal:///1:5620:9)\n    at VueComponent.patch [as __patch__] (webpack-internal:///1:5938:30)',

• Browser Version: Chrome 63.0.3239.132 (Official Build) (64-bit)
• Operating System: MacOS 10.12.6

Will you support Vue 3?

hello and congratulations on a wonderful plugin, i really love it.

I was curious, is it possible to set a class just for one tooltip?

when i use your example it changes it for all the tooltips. Am i doing something wrong?

Feature

Actually, I don't know if this is a bug or a feature request. I must admit that I simply expected this to be working. :-) Now the actual issue:
When binding the tooltip to a value, the tooltip renders with the first value it reads from the binding. Whenever the binding's value changes henceforth, that change is not reflect. The tooltip still shows the initial value of the binding. I made an example here: https://codepen.io/anon/pen/EbGbgL
Simply edit the value in the input and you'll see, that the tooltip won't show that new text.

Hello, I'm having a bit of trouble figuring out what's causing this, but when I try to use the tooltip on an android mobile browser, the tooltip is very wide and causes the page to resize. Any idea how to prevent this? Works great on desktop. You can see it live at https://phillywardleaders.surge.sh

How to intergrate Referencing an HTML element + position tooltip

Hi there! Thanks for your great popperjs integration! 👍

Bug

Behaviour

Current: There is a small delay when tooltip loose the focus, so some tooltips appears at the same time :(

Expected: Tooltip should hide as soon as it loose hovering

https://codepen.io/anon/pen/wYGvee

Please mention other relevant information:

Here is a capture from the behavior:

• Browser Version: Chrome 69
• Operating System: macOS 10.13

Feature

Hi, can you add lazy initialization tooltip? If I add tooltip on buttons in rows of table. On 20 rows, i get 20 initializations. It's too many. And can you add auto-destroy please like here https://github.com/Akryum/v-tooltip/blob/master/src/v-tooltip.js#L239. Thx in advance.
I lost half fps, because tooltip.js autoupdate positions on scroll.

There's no instructions stating a user must register the directive using:

import Tooltip from 'vue-directive-tooltip';
Vue.use(Tooltip);

Please include this. (And thanks for making this!).

Bug

When hovering over an element that also toggles the tooltip's visibility on click, the tooltip remains stuck to visible.

Codepen example:
https://codepen.io/daverogers/pen/mjpLoG

Reproduce:

• With visibility "true", hover over button
• Tooltip should show; click the button
• Now visibility is "false" but the tooltip continues to show regardless of hover

Feature

I would like to request an update to Popper 2.9.0 as it is more streamlined and has more options

I have tried to update via npm from v1.5.1 to v1.6.0 and I am now getting the following error during npm update/install

2461 verbose stack Error: [email protected] postinstall: cd ./site && npm install
2461 verbose stack Exit status 1
2461 verbose stack at EventEmitter. (C:\Users\chris\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:301:16)
2461 verbose stack at EventEmitter.emit (events.js:189:13)
2461 verbose stack at ChildProcess. (C:\Users\chris\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
2461 verbose stack at ChildProcess.emit (events.js:189:13)
2461 verbose stack at maybeClose (internal/child_process.js:970:16)
2461 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
2462 verbose pkgid [email protected]
2463 verbose cwd D:\projects\smt\eds
2464 verbose Windows_NT 10.0.17763
2465 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\chris\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "update"
2466 verbose node v10.15.2
2467 verbose npm v6.9.0
2468 error code ELIFECYCLE
2469 error errno 1
2470 error [email protected] postinstall: cd ./site && npm install
2470 error Exit status 1
2471 error Failed at the [email protected] postinstall script.
2471 error This is probably not a problem with npm. There is likely additional logging output above.

Not sure what is now causing this but any help would be appreciated.

Bug

Behaviour

Current:
The tooltip popup should close when we click anywhere outside, according to the docs
https://hekigan.github.io/vue-directive-tooltip/#/events
However, this is not the case, even on the examples given on the documentation itself.
This behavior can be seen on vue-directive-tooltip versions after 1.5.1

Expected:
When using the Click trigger the tooltip should close when clicking outside.
This issue can be seen here
https://jsfiddle.net/p6jrwfyb/

Using the Focus trigger in place of Click seems to work. @hekigan can you please confirm this?

Bug

Behaviour

When using the tooltip in conjunction with multi-column CSS, the tooltip breaks with the columns, instead of rendering above them.

https://codepen.io/hekigan/pen/BdjJxo

(I was unable to get the tooltips to show using the provided code-pen, but you should get the idea from the code for reproduction.)

The relevant CSS is:

.columns-3 {
    column-count: 3;

    & > * {
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
        -o-column-break-inside: avoid;
        -ms-column-break-inside: avoid;
        column-break-inside: avoid;
    }
}

• Browser Version: Safari 13.0
• Operating System: macOS 10.15.0

Any suggestions on what I might try to have the tooltips ignore the multi-column css? Thanks!

Here's a screenshot:

Feature

In case of feature request, please add "[feature]" in the title
eg: [feature] would like to add this great idea

Bug

When submitting a bug, please use the template below to reproduce the bug on Codepen.
Bug with no example on Codepen will be most likely get closed.

Behaviour

Current:

Expected:

Please, provide the steps and use the template from the link below to reproduce the bug:

This template already has Vue.js and vue-directive-tooltip setup.
Just adjust the code to reproduce your issue.

https://codepen.io/hekigan/pen/BdjJxo

Please mention other relevant information:

• Browser Version:
• Operating System:

Hi,

Is there a possibility to add animation/transition effects?

Thanks!

Feature:

Right now when you hover on a tooltip and try to mouseover the tooltip it disappears. In my case I have to display "Learn more" link inside a tooltip and make it clickable by a user. I know that it can be achieved by attaching tooltip element as a child of element that triggers tooltip so it keeps hovered when user mouseovers the tooltip. I couldn't find a way to achieve that with vue-directive-tooltip. There is container option in Popper.js/tooltip (https://github.com/FezVrasta/popper.js/blob/master/docs/_includes/tooltip-documentation.md search for 'container') but it seems that you are using Popper.js directly without it's tooltip component.

[ASK]
Excuse me, how to make some tooltip with content by html tag using vue-directive-tooltip?
Thank a lot of your attention

Hi! Very lacking is a offset implementation

Bug

When submitting a bug, please use the template below to reproduce the bug on Codepen.
Bug with no example on Codepen will be most likely get closed.

Behaviour

Current: Tooltip always visible

Expected: Tooltip visible only on hover/focus

Please, provide the steps and use the template from the link below to reproduce the bug:

I did nothing else than update from 1.4.5 into 1.5.X. No change in configuration neither in use :

Vue.use(Tooltip, {
    delay: 0,
    placement: 'top',
    class: '',
    triggers: ['hover','focus'],
    offset: 5
});

Even with a CSS updated (I forgot the first time), it's the same.

I tried to make a codepen but impossible to reproduce the bug outside my application, so I think it's maybe another lib or component whom broke yours, have any idea on this topic ?

Hi,
I'm not able to hide the tooltip when trigger is hover.

v-tooltip="{ content: 'test', visible: false }"

For some reason that only works if i put v-tooltip.notrigger otherwise visible property is totally ignored and the tooltip is always displayed.
I'm not sure if this is a bug or it is the intended behaviour, but it's quite weird why I should not be able to hide the tooltip on demand.

hello,

offset and delay do not work in this code. Is it normal behavior when you use notrigger?

on mouse enter and leave are added options i added to make the display dynamic.

 <div class="has-text-left">
											
	<div type="submit" class="button is-primary-merlin" v-tooltip.notrigger="{ content: tooltipData[3], visible: showToolTip(3), class: 'merlintooltip', offset: 50 }" v-on:mouseover="showToolTip(3, 'in')" v-on:mouseleave="showToolTip(3, 'out')" :disabled="!showSubmit"><i class="fa fa-floppy-o"></i></div>
											
</div>

Is there a way to put new line character in a tooltip?