Tooltips in panels

What’s the recommended way to add tooltips in panels?

Using the Aurora-theme, it seems I can’t get auto-initalization using ‘tooltip-init’ to work in side-panels.

What I can do is,

var iconTooltip = app.tooltip.create({
   targetEl: '.icon-tooltip',
   text: 'Tooltip textadsfafasd',
   on: {
        show: function (el) {
         console.log('Tooltip became visible for', el);
      }
     }
 });

…but e.g. the ‘on’ event doesn’t do anything (so ‘Tooltip became visible for’… is never called) and I don’t understand how to use the data-tooltip text

Maybe I get it totally wrong, but shouldn’t:

<div class="tooltip-init" data-tooltip="Hello it's me">

initalize a tooltip with the text in the attribute?

  1. Is there a way to add tooltips to dynamically added items, e.g. as in:

<f7-list-item tooltip-init v-for="(itm, idx) in mainview.reverseLayers" :key="idx" :data-tooltip="itm.name">

In order for all auto-init stuff to work in F7 it should be placed in Page which is in the intialized View. So if you use Vue.js, your panel structure should be like

f7-panel > f7-view > f7-page -> ... required content

In this case it will intialized page which lead to init all auto-init stuff.

Some Vue components, like f7-link, f7-button already have Tooltip creation inside. And they should be just used like: <f7-link tooltip="some text">...</f7-link>.

If this item is present on the moment of page init (e.g. not added to DOM later via Ajax or some other logic), it can be done with:

<f7-list-item class="tooltip-init" v-for="(itm, idx) in mainview.reverseLayers" :key="idx" :data-tooltip="itm.name">

But i will better add same tooltip support for f7-list-item component in next update

So I added a class ‘.icon-tooltip’ to all elements where I want to show a tooltip.

Maybe I just don’t understand the logic behind the tooltip-class, but HOW do I manage to add the data-tooltip attribute to the tooltip? In kitchen-sink all tooltips share the same text, which is not really what I want…

This is more or less from the docs, but doesn’t work for me (‘show’ is never called).

Btw:

var iconTooltip = app.tooltip.create({
    targetEl: '.icon-tooltip',
    text: 'Tooltip text',
    on: {
        show: function (el) {
         console.log('Tooltip became visible for', el);
      }
  }
});

If I do

iconTooltip.on('show', function(el) {
...
}

it works, but the passed el is always the tooltip itself (I’d expect here the target-element - but maybe I’m seeing that wrong).

Btw the F7 tooltip object contains all found target-elements:

$targetEl:  {
  0: <span class="icon-tooltip">, 
  1: <span class="kc_icons save icon-tooltip">, 
  2: <span class="kc_icons trash icon-tooltip">
  ...
}

but since I don’t know which element was hovered, they are pretty useless for me

You need to create each tooltip separately:

$('.icon-tooltip').each(function(index, targetEl){
  app.tooltip.create({
    targetEl: targetEl,
    text: 'Tooltip text',
    on: {
        show: function (tooltip) {
         console.log('Tooltip became visible for', tooltip.$targetEl);
      }
    }
  });
});

That’s what I do, but I thought it would be much cooler, if you can do something like this:

var iconTooltip = app.tooltip.create({
    targetEl: '.icon-tooltip',
    on: {
          show: function (el) {
             this.setText(el.dataset.tooltip);
          }
    }
});

…this would also allow for dynamic tooltips.

…and the show event doesn’t fire for me

You are right, there is an issue in core that i fixed. For now, you can just use it as:

$('.icon-tooltip').each(function(index, targetEl){
  const t = app.tooltip.create({
    targetEl: targetEl,
    text: 'Tooltip text',
  });
  t.on('show', () => {
    console.log('Tooltip became visible for', t.$targetEl);
  });
});

Jep - and I can also add dynamic text like that:

    this.$$('.kc-tooltip').each(function(idx, targetEl){
      if (!targetEl.tooltip) {
          const newTooltip = app.tooltip.create({
            targetEl: targetEl,
            cssClass: 'kc_tooltip',
            text: txt
          });

          targetEl.tooltip = newTooltip;  //save the tooltip instance, so I can switch it on/off individually

          newTooltip.on('show',function (tooltip) {
              this.setText(new Date().toLocaleTimeString()); //or whatever
            });
          }
      });

Notice, that I also attach the tooltip to the element, so I can individually switch on/off any tooltip and I can add more tooltips dynamically (e.g. if list-elements or whatever are added to the page)

1 Like