tlite

import tlite from 'tlite'; // Add some HTML to your page (e.g., in a script tag or .html file) // <button class="my-tooltip-target" title="Hello from Tlite!">Hover for Tip</button> // <button class="my-tooltip-target" data-tlite="w" title="Another tip, positioned left!">Hover Here Too</button> // Initialize tlite to bind tooltips to elements with the class 'my-tooltip-target' // This will make any matching elements show a tooltip on hover based on their 'title' or 'data-tlite' attribute. // The selector function receives the element and should return true if tlite should manage it. const myTliteInstance = tlite(el => el.classList.contains('my-tooltip-target')); console.log('Tlite initialized for elements with class .my-tooltip-target'); // You can also manually show a tooltip, for example, on the first target after a delay const firstTarget = document.querySelector('.my-tooltip-target'); if (firstTarget) { setTimeout(() => { console.log('Manually showing tooltip on first target...'); tlite.show(firstTarget, { grav: 'n' }); // Show below the target setTimeout(() => { console.log('Manually hiding tooltip...'); tlite.hide(firstTarget); }, 3000); }, 2000); }