profile
viewpoint

Ask questionsMultiple HTML instances vs one

Hi there,

First off thanks for a lovely tooltip library! The docs are extensive, the tooltip itself is more-than-plenty configurable and it's been a breeze to use so far!

Not sure if this is a bug report or simply me misusing tippy, but I'm trying to add an interactive options menu to every item on a list with Vue. Since an html template via direct ref is only usable once, I've set up my loop so that every list item's options menu also renders its own tooltip contents. Then, in the component's mounted hook, I'm looping through the generated menus and initialising tippy on each:

mounted () {
  const tooltips = document.querySelectorAll('.filter-tippy')

  ;[].forEach.call(tooltips, tooltip => {
    if (tooltip._tippy) return
    tippy(tooltip, {
      html: tooltip.querySelector('[data-template]'),
      appendTo: tooltip.parentNode,
      animateFill: false,
      performance: true,
      placement: 'bottom'
    })
  })
}

Current behaviour: screen shot 2018-09-19 at 10 48 40

I also found https://github.com/atomiks/tippyjs/issues/10 and the mention of multiple, but that doesn't seem to work for me so i'm wondering if it's the case of creating multiple instances of tippy?

When I tried to replicate this behaviour in your Codepen template, then it works as expected (an active tippy is closed before opening a new one). The bug shouldn't be anything vue-specific since I'm initiating tippy with vanilla JS. Any other information I could provide to further debug this?

Replication: https://codepen.io/ajv/pen/OoaWLB

How should I approach this situation? I thought of also having a single instance, but then I couldn't pass the item's data object to the listener and would have to read certain attributes from the event target's data attributes, I presume.

atomiks/tippyjs

Answer questions JamoCA

While this gets debugged there is a hack to fix this: Basically select any showing poppers on the document and hide them before the new one gets shown.

@atomiks, I use the hideAll() method to hide all tooltips. (I needed this because events listed using the FullCalendar library were close together and the new tooltip was occassionally displayed underneath an interactive tooltip.)

onShow(){
    tippy.hideAll({ duration: 0 });
}

Is this a newer method? Are there any issues with using this approach? (It seems to work correctly.)

Also, I noticed that hideAll() isn't listed in the doc with other methods. It's only referenced in the "Misc - Hide tooltips on scroll".

useful!
source:https://uonfu.com/
Github User Rank List