Reply To: Dynamic change content of Tooltip

May 15, 2018 at 8:24 am #98843

Keymaster

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