kabbouchi / vue-tippy Goto Github PK

Is there a way of disable touch on mobile devices

Hello!
I have a tooltips in sidebar. Sidebar becomes hidden on mouseleave event.
The problem is when I hover a tooltip, mouseleave event fires, because tooltip markup is generated outside the sidebar element.
To solve the problem I changed a little mouseleave handler, disabling it if relativeTarget has class tippy-tooltip, and it works well.
But now I realize that I can have other tooltips in my site, which shouldn't interfere in this logic.
So I need to find some way to identificate certain group of tooltips (tooltips in sidebar element in my case), adding them data-attribute during render, for example.
Now the question: how can I add some identificator to tooltip element? Something like this:

Thanks in advance!

Hi !

I try to use vue-tippy (amazing work!) in a Nuxt.js application with a nuxt-link in a popover.
I can show popover with a link without troubles but when I click on a link, the application is full reloaded instead of redirect me to the page by vue-router.

Is there a specific thing to do in nuxt.config.js or in tippy directive to avoid this ?

Apparently with latest release (2.0.14) I can't use the same HTML template for multiple tooltips anymore, not even setting reactive: false.
(On restoring v. 2.0.13 my app works again)

Can somebody confirm? Any idea?
Thanks.

I am using vue-material in my project. I have added a md-icon to my md-card-header component. However the rather lengthy tooltip is behaving oddly. It will not overflow out of the tooltips parent container. This is not expected behavior since a tooltip can overflow in my opinion over other elements.

To reproduce create any lengthy tooltip on a md-icon component but put it in a small container. THe tooltip will always align itself with the edge of the parent container instead of ensuring it is seated in placement to the object that is listed as the tippy spawner, and will not overflow if it needs to.

Could you stop to use a source map from main file (i.e. vue-tippy.common.js) ?

In my development environment of my application,
vue-tippy will use its sourcemap (=popper.js.map) and request it to our server,
but there is not the file in our static files.
So, our app (express router) cannot find a route of it, and return an error.

hello and happy new year!
please, can you provide example which will demonstarte how i can atach two tooltips to one element (one show on hover, second show on click).

for example: hover on button - show tooltip "click to show information". after click on this button - tooltip "click to show information" must hide and second tolltip with some data must be shown

or please provide example how in vuejs show tooltip with trigger option eq 'manual'

Hi there, thanks for such an amazing library! :)

I think that specifying id like "#myDropdown" is a bit of code-smell, better solution is to reference dom element by using $refs. Moreover, tippy.js allows to use DOM nodes instead of css query selector.

However it didn't work for me. Here is my attempt: https://codesandbox.io/s/wn9j5r9zk7
It worked with "#myDropdown" but didn't work with $refs.

Thank you!

I'm trying to set some default tippy options

window.Vue = require('vue');
var vueTippy = require('vue-tippy');
Vue.use(vueTippy, {
	animation: 'fade',
	arrow: true,
	interactive: true,
	position: 'top',
	size: 'large',
	trigger: 'mouseenter'
});

then

<i class="fa fa-question-circle" title="Tippy title" v-tippy></i>

But it seems to revert to the default tippy options (aka not my globally set "fade" animation or interactive: true etc)

Is this something you can reproduce? Or am I doing something incorrectly?

"tippy.js": "^2.0.0-beta.2",
"vue": "^2.1.0",
"vue-tippy": "^0.3.0",

Just wanted to thank you for this neat plugin. What I like about it the most is that it can be implemented also as directive instead of custom component. And I don't think tooltips have its place only in the components.

I was using my own provisional solution also on top of Popper.js in my projects for a while but I've switched to tippy.js/vue-tippy and it's much better thanks to a lot of customization options. I'm now using it for some time and it's working great in development and production.

Hello again. I am trying to use component, but it doesn't work.

<button class="btn"  v-tippy data-arrow="true" data-html="#comppopup">CLICK</button>
<GoogleMaps style="display: none" id="comppopup"></GoogleMaps>

Without it component works fine on page. But tooltip it just empty.

UPD. Looks like this related to this specific Google Maps component. I just tried component without dynamic content, just static text, it works fine!

Then I guess, question is how to handle such usecases?

Anyway, like a I said before, library just awesome! I found out another bindings to tippy from EGOIST, and they doesn't have component loading option at all. So, great work.

I currently use vue-tippy v0.1.2 because the newer versions don't work for me.

I tried updating to v0.1.5, but when I do my app doesn't load and I get this error in the console:

Uncaught ReferenceError: Vue is not defined

Digging deeper, chrome dev tools highlights this part of the code as problematic:

Vue.prototype.$tippy = {

This did not work
Vue.use(VueTippy, { onHidden: ... }) // At install

Checking src/index.js, overwrites the event handler.
opts.onHidden = function () {}

So, this also does not work.
v-tippy="{ onHidden: ... }" // binding.value

Therefore, it seems necessary to give a handler for every element. @hidden="..."

However, I want to give the same event handler to all tooltips.
It is impossible because it has been overwritten, what should I do?

from the docs.

Tooltips inside a scrollable container

You may encounter issues with tooltip positioning when it's given to an element within a scrollable container. Firstly, when the element is no longer visible, the tooltip will stay stuck within the viewport. Secondly, it transitions between position updates. To solve this, simply specify a flipDuration of 0 and add the following popperOptions:

tippy('.mySelector', {
  flipDuration: 0,
  popperOptions: {
    modifiers: {
      preventOverflow: {
        enabled: false
      }
    }
  }
})

Hello. Where I can see how to use different kinds of popups? Any example, docs, anything?

I notice issue, if I use click trigger, then hit Return button - tootip doesn't destroyed :-(

On your examples page, when you trigger the same tooltip, their content changes to the string 'html'. I've reproduced this in my own environment as well.

Sorry in advance if this one is blury... 😕

It's an error reported by our notification system that informs us when a user stumble upon a JS error on our production website. I tried to reproduce it many times but I've never been able to !

The a.html is the result of our assets being minimized, by looking at our webpack bundle it look like this :

a.html&&(a.reactive?a.html=document.querySelector(a.html):document.querySelector(a.html)._tipppyReferences?document.querySelector(a.html)._tipppyReferences.push(t):document.querySelector(a.html)._tipppyReferences=[t])

which seems to correspond to this part :

I'm not really sure of what's happening, or what can cause a null is not an object error 🤔

It seems to happen only on Safari tho :

• Safari 11.1/Mac OS X 10.13.4
• Mobile Safari 11.0/iOS 11.3

And our version in production is [email protected] (which is latest)

✨ ACTUALLY, by looking further in the logs I've found more entries on other browsers with a different error (but still related to _tipppyReferences) :

• Chrome 66.0.3359/Windows 10 : Cannot read property '_tipppyReferences' of null
• Opera 52.0.2871/Windows 10 : Cannot read property '_tipppyReferences' of null

So possibly document.querySelector(opts.html) returns null sometimes, for reasons I don't know... 🙂

I have an HTML popup with Yes/No buttons in it. How do I hide the popup when the user clicks one of the buttons or clicks outside the popup area?
Thanks.

Do you plan migrating the component to tippy 2.0 ? It is much easier to use via the _tippy property and there is no need to call update when changing title if you set dynamicTitle to true

maybe something like v-tippy="{arrow: true, toggle: checkForData()}" ?

In my app I have two nested divs, each div has personal tooltip.
When I hover nested div I see two tooltips: one of hovered div, and other of parent div (due to bubbling).
How can I prevent such behavior? Here I have the reproduction of the case:
http://jsbin.com/cofunaj
(the behavior I try to reach is to show only one tooltip when yellow div is hovered)
Thank you!

Can't get the data-binding work in real time, it's always one iteration behind.

Hey, first, this is a great lib! Starred and can't wait to fully implement it. One problem I'm having though is that once the tip is open the user can mouse over the tip completely but as soon as they mouse over a button it closes. This is Chrome (latest) macOS

<template>
  <div>
    <i 
    class="ion-android-checkbox-outline-blank" 
    v-tippy="{ 
      html: '#check-all-tooltip', 
      interactive: true,
      animation: 'scale',
      arrow: true
      }"></i>
    
    <div id="check-all-tooltip" class="bg-background-darker pt-4 pb-2 px-4">
      <div class="">
        <h6>Header</h6>
        <p style="color: black"> This is the message based on the current mode </p>
        <a type="button" model="checked" @click="update" title="Hi!" v-tippy>{{ checkAll[this.type] }}</a>
      </div>
    </div>
  </div>
</template>

As you can see on this codepen, an additional <button> element is added to the html tooltip template.

Would you know why and how to fix that?

(Bonus: the arrow: true is not taken into account too)

I have a case where I need to show the tooltip only when my component is in a particular state. This state is gained with user interaction so there are no tooltips in the beginning. Please see the plnkr below. What is the way of achieving this with vue-tippy?

https://plnkr.co/edit/zzS9q9?p=preview

how come white theme doesn't have triangle on bottom, like normal theme does?
I see that jquery tippy has this.

I've been trying to implement vue-tippy with a manual trigger (as tippy docs suggest), by passing trigger:'manual'. The open on click is actually disabled in the button, but when I try to call show() method nothing happens.
<button class="e-btn--ghost" ref="buttonSaveTrip" @click="saveTrip" v-tippy="{ trigger: 'manual', html: '#saveTrip', interactive: true, arrow: true, boundary: true, distance: '15', theme: 'light', inertia: true, reactive : true, offset: 70}"> Save trip </button>

And then calling show():
saveTrip() { this.$refs['buttonSaveTrip']._tippy.show(); }

Although, if the trigger is 'click', I can call _tippy.hide() from any other element and it works.

Any idea of what can be causing the issue? Maybe tippy.js?

global options like

Vue.use(require('vue-tippy'), {
    arrow: true,
})

doesnt work.

tippy option like

v-tippy="{ position : 'right'}"

also doesnt work.

Hey 👋 Thanks for making the effort to create this plugin. It will be very handy for me. I'm trying to set a default theme by passing it in plugin installation options. Here is the code:

Vue.use(VueTippy, {
  theme: 'foo'
})

It doesn't seem to work for some reason. Has this feature been tested?

Hi. I noticed that you using this.$tippy.forceUpdateHtml().
From where does this function is coming from? I can't find it. It's not documented?

i know that we already have the option of custom html, but consider this example.

• we have a loop that will render a table with columns "keys, values, ops"
• now for each cell of the keys column, we show a tooltip with some info
• but we also want to allow the user to interact with that tooltip so we could do something like

v-tippy="{ position : 'right',  arrow: true, interactive: true, clickEvent: doSomething(data) }"

and inside the doSomething()

doSomething(data) {
 // data is basicly the 'data-original-title' tippy has auto-resolved for us
}

v-tippy="{placement: 'right', arrow: true}"

will show the tooltip on the left.

Hi,
Thank you very much for this plugin, very useful!

I'm having an issue with getting v-model to work inside a v-tippy-html when it's on input.
I can print the tradePrice just below the input though, I'm not sure what's going on. Maybe because it's nested?

I using this config to have a tippy on hover on my button, and then a tippy triggered with click on .icon, which is working great!

<button class="add-bag button is-text" v-on:click="toggleModal" :title="Add" v-tippy>
  <div class="icon is-medium" :data-tippy-html="'#' + generateID" v-tippy="{ trigger: 'click', interactive: true, reactive: true }">
    <span class="fa-stack">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-plus fa-stack-1x"></i>
    </span>
  </div>
</button>

<div :id="generateID" class="content" style="display: none;" v-tippy-html>
  <input v-model="tradePrice" class="input is-small has-text-right" type="text" placeholder="Trade price">
{{ tradePrice }}
</div>

Any help is much appreciated!
Thank you

I have a template:

<div id="template-notification">
<notifications>
<notification-item @click="closeTippy()"></notification-item>
<notification-item @click="closeTippy()"></notification-item>
<notification-item @click="closeTippy()"></notification-item>
.....
</notifications>
</div>

And i open vue tipppy by trigger a click. But I dont know how to close vue-tippy manually after call closeTippy(). Can you support me?

<button id="button3" v-tippy data-html="#contentpopup"> html content </button>
   
<div id="contentpopup" >
    <div style="background:red;">
         {{ message }} - My html content
    </div>
</div>

JS

var vueTippy = require('vue-tippy')
Vue.use(vueTippy)

var data = {
    message: 'Hello Vue.js!'
}

var demo = new Vue({
    el: '#demo',
    data: data
});

it does not work.

How does one create a custom theme with vue-tippy?

This works:

v-tippy="{ position : 'top', arrow: true, theme: 'light', size: 'big' }"

While this does not:

v-tippy="{ position : 'top', arrow: true, theme: 'honeybee', size: 'big' }"

.tippy-tooltip.honeybee-theme { background-color: yellow; border: 2px solid orange; }

Maybe I missed it somewhere?

Over-writing an existing theme in css seems to have no effect, even when using an !important flag.

Thanks in advance

Is there any possibility to add the support for nested Tooltip?....Is there any possibility to add the support for nested Tooltip?.... For example if you have a button that open a tooltip and inside them another button with other tooltip content...
Now only works for not nested tooltip..... right?

I experience the above error message when I use v-tippy within `. The tooltip is shown as expected.

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

Starting from my simple tooltip example where a tooltip component is cloned as many times as needed, I tried modifying the underlying data in order to generate a dynamic amount of elements (and therefore tooltips components), however it seems vue-tippy stops transforming those components in tooltips.

I first tried a simple synchronous version, however while I added the async version, it broke and I can't find a way to display the tooltips anymore. Whoops! 😏

Then I created an asynchronous version where the tasks can either be added synchronously or asynchronously, in order to test if the tooltip components are correctly created.

As you can see, the tooltip components are correctly created, but directly displayed instead of being hidden.

Would you know if that's a bug and how to fix it?

Do you have an example with a custom trigger?
I think a greate feature is to have a click hover event has a trigger that works as follow:

• If you hover over element, it show and hide as the common beahviour.
• If you click on trigger element, show tooltip and keep showed until click again.
  Now it has the option for click and hover but not a combination of both. I think on an event like "hover and keep onclick"

On this codepen, I create multiple elements using a v-for loop.

Now, whenever I hover on each of those elements, I update some data that I want to display on a tooltip.
However when I declare the v-tippy directive on the generated elements, only the very first generated element displays a tooltip on hover.

Any idea why and how to fix that?

• v2.0.2

<div v-tippy> // No title
<div v-tippy title=""> // Empty title

When trying to leave a page with these elements,
the following error occurs:

TypeError: Cannot read property 'destroy' of undefined
    at unbind (vue-tippy.js:4713)

Since there is a v-tippy directive, Try to unbind,
But since title is not set, it seems that the instance has not been created.

It is bad that title is not set.
However, errors should also be avoided.

unbind: function unbind(el) {
  // el._tippy.destroy();

  el._tippy && el._tippy.destroy();
},

Thank you.

Hi,

I need to find a way to recompute the tooltip title when it is displayed. Currently I'm displaying a timestamp. When the timestamp changes, no problem, everything is updated properly.

Now I want to improve UX by replacing the timestamp with a timeago sentence (e.g. "3 minutes ago") using moment.js

I can do it but the displayed timeago sentence will never change because the underlying data does not.

Is there a way to call the moment.js function when the user hovers the button so I can display the proper, actualized timeago sentence?

Thanks!

Are html templates supported? Specifically, can one reference another vue component as a html template?

can i link to one reactive html template from many items. In the original plugin there was only a solution with cloning an element.

example:

<div class="chess-tippy" ref="chessTippy" id="tippytemplate">
           <div class="chess-tippy__header font-2">Flat {{hoveredFlat.number}}</div>
</div>
<div class="chess-floor" v-for="(floor, floorIndex) in section.floors">
                <div v-tippy="{
	                                  placement: 'bottom',
					  arrow: true,
					  theme: 'light bordered',
					 animation: 'fade',
					 maxWidth: '210px',
					 performance: true,
					 interactive: true,
					 zIndex: 9,
					 html: '#tippytemplate',
					 reactive : true
				}"
                               v-for="flat in floor.flat"
                               :class="['chess-flat',{ '_disable': !flat.active },{ '_selected': isSelectedPlan(flat) }]"
                               @mouseover="hoveredFlat = flat" >
                                                {{ flat.rooms }}к
                   </div>
</div>

I have a list generated by Vue and each item contains a tooltip, however currently I can open 2 at the same time when clicked. Ideally if one is open and you open another one, the first would close. The demos on tippy.js seem correct in this behaaviour and it seems that multiple: false, is set as the default in the options, so not sure what I'm doing wrong?

button(
  @click.stop, 
  v-show="withdrawal.CommentsList.length > 1",
  v-tippy="{ html: '#comments', trigger : 'click', interactive: true, reactive : true}")
ol(id="comments")
  li(v-for="comment in comments") {{ Comment }}

Default State:

State after both buttons clicked:

Hi! How can I destroy all tooltips manualy? I have component 'calendar', I use html template tooltips, want to use them, to display events, when hover over date, it works until month is switched, when it's switched back, to month where tooltips were already, there's an error - " _Error in directive tippy inserted hook: "TypeError: Cannot set property 'tipppyReference' of null" ". So, I thought, if I could destroy all tooltips on month switch, all would work as expected.