self.$setState and auto-initialized tooltips

Questions
1

Hi there,

I have a list that gets updated in the data and then I call self.$setState in my component to refresh the template. It works perfectly.

On some of the list items I have a data-tooltip="{{myToolTipMessage}}" attribute with the class “tooltip-init” on a few elements.

It works well until the message inside the data-tooltip needs to change. The template gets updated and looks okay but hovering over the tooltip item… it shows the old message and not the new one.

Is there something I can do without having to “get” the tooltip and then change it in javascript? I like sticking with the template7 Template.

  • Matt
2

If you upload captures, it would help us a lot and the code that you use

3

That is a good point. Let me share some screenshots.

  1. Here is the list and the working tooltip just fine.

  2. Here is after the data has changed and I refresh the component template with self.$setState(). Looks good except for the tooltip didn’t change… The HTML is correct and the refresh worked with the data-tooltip attribute now saying: “Busy With Customer.” Except the tooltip itself is still initialized and says the old string 'This employee is on the Up List."

  3. Screenshot of the updated HTML after refreshing the tooltip with self.$setState();

Do I need to just find all tooltips, loop them with an “each” and then re-init them? I mean I will do that if I have to, just seemed like the refreshing of the template should take care of that, or at least have an option to say “refresh tooltip inits too.”

Thanks

  • Matt

1-------------
1

2 ------------
2

3-------------
3

4

did you try as the doc says?

app.tooltip.setText(targetEl, text)- change Tooltip text

el - HTMLElement or string (with CSS Selector). Tooltip target element.
text - string - new text to set in specified Tooltip.

so:

app.tooltip.setText('.my-awesome-tooltip', 'My new tooltip text :D!")

and here is the doc:
https://framework7.io/docs/tooltip.html

5

I saw that and it looks like I will end up doing just that.
I get that the component method $setState only “re-renders” the template. I will use an “$each” function to GET the tooltips and change the text through javascript.

Thanks for talking with me about this.

  • Matt
6

So ultimately I added these 5 lines after I call self.$setState() when I want to refresh my list:

self.$setState();

// Fix auto-init tooltips on the page...
self.$el.find('.tooltip-init').each(function(e) {
    var thisToolTipEl= self.$(this);
    var thisToolTip= self.$app.tooltip.get(this);
    thisToolTip.setText(thisToolTipEl.attr('data-tooltip'));
});
1 Like
7

Thanks for reporting, this issue already solved in git repo, so it will work as expected with next update, with your manual .setText logic after calling setState