Tooltips with HTML, CSS and JavaScript

2016-10-30 00:00:00 by Mike

Tooltips provide a simple way to: contextually add explanatory notes, elaborate on a linked phrase, provide feedback to a user, et cetera.

The stand-alone demo can be found here.

Figure 1 (below) shows what our tooltips will look like based on a basic HTML, CSS and JavaScript implementation outlined in Figure 2 (also below).

The HTML, CSS and JavaScript provided in Figure 2 (below) are fairly straightforward.
A couple of things to note about the JavaScript:
- It is concise, native JavaScript and does not rely on any frameworks.
- Supports touch events for mobile devices, as well as ensures the tooltips are not hidden offscreen.

I really hope you enjoy the write-up and the tooltips!

Figure 1: tooltips provide a simple way to contextually place explanatory notes, elaborate on the linked phrase, etc.


<style> .term { position:relative; border-bottom:1px dashed #555; text-decoration:none; } .term:hover > .annotation, .term.active > .annotation, .term:hover > .arrow-down, .term.active > .arrow-down, .annotation:hover { display:block; } .annotation { width: 15rem; position: absolute; background: #333; color: #fff; padding: .5rem; display: none; top: -3.75rem; left: 0rem; font-size:.75rem; height:2rem; } .arrow-down { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #333; position:absolute; display:none; top:-.75rem; left:.5rem; } .term.warn .annotation { background:#ed911a; } .term.warn .arrow-down { border-top: 10px solid #ed911a; } </style> <p> Some terms benefit from tooltips to provide more <a class="term" data-component="tooltip" href="#">information<span class="annotation">This is an annotation that explains the word below</span><span class="arrow-down"></span></a>. </p> <br> <p> Let's make sure the tooltip is not displayed <a class="term" data-component="tooltip" href="#">hidden offscreenlt;span class="annotation">A small JavaScript function re-positions the tooltip</span><span class="arrow-down"></span>lt;/a>. </p> <br> <p> You can easily customize the tooltip <a class="term warn" data-component="tooltip" href="#">color using CSS<span class="annotation">This orange tooltip using the CSS class "warn"</span><span class="arrow-down"></span></a>. </p> <script> (function() { // Find all tooltip components in the document var eleTooltipLinks = document.querySelectorAll("[data-component=tooltip]"); var body = document.querySelector("body"); // Use touch event listeners for mobile clients for (var a = 0; a < eleTooltipLinks.length; a++) { var tooltipLink = eleTooltipLinks[a]; tooltipLink.addEventListener("click", function(e){ e.preventDefault(); }); tooltipLink.addEventListener("touchstart", function(){ this.className += " active"; moveTooltip(this); }); tooltipLink.addEventListener("touchend", function(){ this.className = this.className.replace(" active", ""); moveTooltip(this); }); tooltipLink.addEventListener("mouseover", function(){ moveTooltip(this); }); } // Make sure the tooltip is completely visible function moveTooltip(currentTooltipLink) { var annotation = currentTooltipLink.querySelector(".annotation"); var annotationXCoordinate = currentTooltipLink.offsetLeft + annotation.offsetWidth; if (annotationXCoordinate > document.body.offsetWidth) { annotation.style.left = "-" + annotation.offsetWidth/1.25 + "px"; } else { annotation.style.left = "0"; } } })(); </script>
Figure 2 - The tooltip code: The HTML, CSS and JavaScript for implementing the tooltips.