Share/Reuse tooltips

[enkol]

Would be nice, to have a way to reuse/share tooltips.

Simplified use case example of a list with several items, each with a delete icon button having a "Delete" tooltip:

<div class="list">
{{#each items as |item|}}
  <div class="item">
    {{item.name}}
    <div class="icon-delete" {{action "delete" item}}>
      {{#ember-attacher}}Delete{{/ember-attacher}}
    </div>
  </div>
{{/each}}
</div>

At the moment, this would create a distinct tooltip for each item. Ends up having a lot of "duplicate" tooltip elements.

If there would be a way to declare a tooltip beforehand and then just bind it to several elements, one could eliminate a lot of these "duplicate" tooltip elements.

{{!-- create a shareable tooltip, not bound to anything yet --}}
{{#ember-attacher set="delete-tooltip"}}Delete{{/ember-attacher}}

<div class="list">
{{#each items as |item|}}
  <div class="item">
    {{item.name}}
    <div class="icon-delete" {{action "delete" item}}>
      {{ember-attacher get="delete-tooltip"}} {{!-- bind the shared tooltip --}}
    </div>
  </div>
{{/each}}
</div>

[kybishop]

Assuming we had a single tooltip element for multiple targets, we run into an unfortunate limitation of the positioning library, Popper.js. Popper.js only supports a single target reference on creation, and does not allow that reference to be changed.

We theoretically could create a bunch of disabled Popper.js instances, and only call update on them when we hover over a given target... though that would probably require a significant rewrite of ember-popper, or perhaps a specialized component for that use-case.

Will continue thinking on this. It's definitely possible, but the underlying libs aren't geared toward this use-case (yet 😉 )

[enkol]

Thanks for the insights. It's not an issue right now, to have all the "duplicate" tooltips, as i don't see a performance impact yet. So consider this as low priority.

[FezVrasta]

@kybishop You can use a fake DOM object as reference element in Popper.js and make it proxy the info of the desired real DOM element.

[kybishop]

75 does a good job at mitigating this issue, but a truly reusable tooltip would be the holy grail. I'd like to have this implemented at some point, so keeping this open for now.

[atomiks]

Event delegation is something I'm currently trying to implement in tippy.js

https://jsfiddle.net/fc1vkvo5/

https://github.com/atomiks/tippyjs/pull/143

It only uses a single popper instance and tooltip, so it's O(1) to init and really fast.

The only downside I've witnessed is that because there can't be two poppers on the page, it will forcibly remove the popper when transitioning out to update the new position if another target was reached.

---

There's no need to use a fake DOM obj, just update the reference of in the popperInstance to the new event target.

[kybishop]

@atomiks thanks for the ping! I've been watching your PR to see how it goes.