Is there a way to use single tooltip instance for multiple elements?

[MarkM]

I have a smart grid that is being populated dynamically with data. One of the columns in the grid uses a few different Font Awesome icons wrapped in a div to indicate the items status.  Because it is an icon, a tool tip is very helpful.

For example, the markup for one of the possible status icons is:

<div class=”custom-icon fa-question-circle” title=”Further Clarification Requested”></div>

The above will display the browsers built-in tooltip because of the title attribute. I like the appearance of the smart-tooltip better and would like to use that instead if possible.

The issue I am struggling with is because the icons are generated dynamically for each row in the dataset, I can’t see an easy way to generate a unique id for each to assign the selector. Is there a way I can instead use a class name or some other method to setup a single smart-tooltip that will display next to each instance of that particular icon?

Thanks!

• This topic was modified 2 years, 10 months ago by MarkM.
• This topic was modified 2 years, 10 months ago by MarkM.

[Yavor Dashev]

Hi MarkM,

To make matters a bit more convenient I have created a complete code example which showcases this funcitonality.

Link to the code example: https://codepen.io/yavor_htmlelement/pen/dyVOEpY

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/

[MarkM]

Thank you for taking the time to make a demo Yavor!

I will try to implement it as you show. Thanks again!

[Author]

Posts