Creating many and many tooltips

[tbettinazzi@axioma.it]

I’ve a page with more than 300 buttons.

On each button I need a tooltip but I’ve only 10 different tooltips (many buttons have the same tooltip).

Creating such tolltips by js takes a long time : the show time of the page goes from 2 to 7 secs.

Is it possible create a tooltip and attach it to many buttons ?

How, using css classes as selector?

I saw there’s template but I didn’t understand how to use it in this situation.

Tks

• This topic was modified 6 months, 4 weeks ago by tbettinazzi@axioma.it.

[tbettinazzi@axioma.it]

I created a testcase on codpenn

You’ll see that if You comment the last appendChild it goes faster in a visible way.

Tks

https://codepen.io/tullio0106/pen/xbKEZjz

[phale]

Yep, you don’t need to create a separate tooltip for every button. Since you’re only using around 10 different messages, just add a class (like <code data-start=”212″ data-end=”226″>.has-tooltip) and a <code data-start=”234″ data-end=”248″>data-tooltip attribute to each button. Then use a bit of JavaScript to show the right tooltip on hover based on that attribute. That way, you’re only creating one tooltip at a time and not loading hundreds when the page starts.

[Author]

Posts