Tooltip in virtualList

Questions
1

Hi,

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?

Thanks!

Some code I’m trying:

2

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

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

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

3

Two ways:

  1. Virtual List and vDOM https://github.com/framework7io/framework7/blob/v5/kitchen-sink/core/pages/virtual-list-vdom.html
    2 Or manually app.tooltip.create() in itemsAfterInsert and destroy tooltip in beforeClear
2 Likes
4
  1. I need help again.
    I don’t know what to do with fragment .
    How to resolve fragment to the list of items/el?
    https://framework7.io/docs/virtual-list.html#virtual-list-events

Thanks!

5
  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.

Thanks!

7

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.