Tooltip in virtualList


I know using tooltip-init class does not work with newly rendered items in virtualList.
<div class="item-subtitle tooltip-init" data-tooltip="abc {{subtitle}}">{{subtitle}}</div>

I am looking for a way to create tooltips after item-render and to remove them before item-destroy.
Can someone give me a hint?


Some code I’m trying:

I’ve managed to create Tooltip when item-rendered.

  on: {
    vlItemBeforeInsert(virtualList, itemEl, item) {
        targetEl: $(itemEl).find(".item-title"),
        text: `Tooltip text ${item.title}`

I am still look for a way to do things before item-destroyed.

Two ways:

  1. Virtual List and vDOM
    2 Or manually app.tooltip.create() in itemsAfterInsert and destroy tooltip in beforeClear
  1. I need help again.
    I don’t know what to do with fragment .
    How to resolve fragment to the list of items/el?


  1. just works, don’t actually understand why. Can use this without problem:
    <div class="item-subtitle tooltip-init" data-tooltip="abc {{subtitle}}">{{subtitle}}</div>

Besides, renderExternal is the best coding pattern for me. I don’t need to change from html template to itemTemplate as string. You have really saved my life.


I am sharing my experience.

Don’t miss that style=“top:…” when using renderExtenal. I have wasted a lot of time for debugging the list not showing correctly.