JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Tooltip Is there a way to use single tooltip instance for multiple elements?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #102778
    MarkM
    Participant
    Up
    0
    Down

    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 1 week, 2 days ago by MarkM.
    • This topic was modified 1 week, 2 days ago by MarkM.
    #102783
    Yavor Dashev
    Participant
    Up
    0
    Down

    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/

    #102786
    MarkM
    Participant
    Up
    0
    Down

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

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.