Tooltips for Button elements

Level-up with JavaScript tooltips

To jazz-up your tooltips, let JavaScript take the lead. With it, you have the power to animate or affect visibility without needing the title attribute.

document.querySelector('.tooltip-btn').addEventListener('mouseenter', function(event) {
  var tooltip = this.querySelector('.tooltip');
  tooltip.style.visibility = 'visible'; // Now you see me...
  // Add your transition or animation logic here
});

document.querySelector('.tooltip-btn').addEventListener('mouseleave', function(event) {
  var tooltip = this.querySelector('.tooltip');
  tooltip.style.visibility = 'hidden'; // Now you don't!
});


This quick JavaScript snippet can toggle visibility, opening a world where tooltips can dance on and off the page.

Up your game with ARIA attributes

Make tooltips accessible by using ARIA attributes. These add meaningful context for those using assistive tech.

<button aria-describedby="tooltip1">Hover over me!</button>
<div id="tooltip1" role="tooltip" class="hidden">Accessible Tooltip</div>


.hidden { display: none; }  /* Hidden but not forgotten. */


The aria-describedby paired with role="tooltip" creates a virtual bridge - a clear indicator of how the tooltip should be understood by assistive technologies.

Calling in the heavyweights: third-party libraries

When you're hungry for sophisticated designs or need more control, third-party libraries come into play. Tippy.js, for instance, adds some serious muscle to your tooltips.

<link href="tippy.js/dist/tippy.css" rel="stylesheet">
<script src="tippy.js/dist/tippy.min.js"></script>


tippy('.tooltip-btn', {
  content: "I'm a Tippy tooltip!", // Tipping the scales
  // ... additional options ...
});


Thanks to third-party libraries, you can create dazzling tooltips without breaking a sweat.

More than just titles: case for div elements

For scenarios demanding rich content, div elements coupled with visible/non-visible toggling can offer the needed flexibility.

<button class="tooltip-btn">Hover over me
  <div class="rich-tooltip"> 
    <img src="info-icon.png" alt="">&#128161; 
    <p>Here's where the magic happens: images, links, whatever you fancy!</p>
  </div>
</button>


This small trick unveils a treasure chest of possibilities.

Gotchas and avoiding pitfalls

• Tooltip visibility – Don't let them cover up important elements.
• Responsive design – Ensure your tooltips look good regardless of screen size.
• Accessibility check – Tooltips should not be the sole custodians of critical information. Why? They can be a hurdle for our keyboard-only users, too.