HTML Elements Forums Tooltip Dynamic change content of Tooltip

This topic contains 2 replies, has 2 voices, and was last updated by  pcng618 1 year, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #98842

    pcng618
    Participant

    Hello,

    I am new here. And I’m interesting about this framework. How can I set dynamic Tooltip?
    I wont to change the content of the Tooltip? Let’s say when I click on the button.

    Thanks,
    –Aleksandar Laskin

    #98843

    Christopher
    Participant

    Hi pcng618,

    In order to change the content of the Tooltip dynamically you need to set the innerHTML property of the Tooltip instance. To change it when clicking on a button you have to bind to it’s click event and simply set the new content to the innerHTML property of the Tooltip. Here’s an example:

    
    <head>
     <script>
            window.onload = function () {
                var tooltip = document.querySelector('smart-tooltip');
    
                document.getElementById('myButton').addEventListener('click', function (event) {
                    document.getElementById('tooltip').innerHTML = 'The button is clicked !';
                })
            }
        </script>
    </head>
    <body>
        <smart-button id="myButton"></smart-button>
        <smart-tooltip id="tooltip" selector="myButton">Some Random Text</smart-tooltip>
    </body>
    

    Best Regards,
    Christopher

    SmartElements Team
    http://www.htmlelements.com

    • This reply was modified 1 year, 2 months ago by  Christopher.
    • This reply was modified 1 year, 2 months ago by  Christopher.
    #98852

    pcng618
    Participant

    Hi Christopher,

    Thank you for this example. I will use this native way.

    –Aleksandar Laskin

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.