JavaScript: How to Create Tooltip

, , …,
Want to master JavaScript in a week? Example based, to the point. Xah JavaScript Tutorial.

This page shows you how to do floating balloon (aka tooltip) using JavaScript, without using any JavaScript library.

Hover over me to see a example.

Here's the HTML code:

<p><span id="t42310">Hover over me</span></p>

Here's the JavaScript code:

// -*- coding: utf-8 -*-
// © 2013 Xah Lee, http://xahlee.info/
// if you use, please give credit and link. Thanks.

function createTooltipElement () {
    // create balloon element to display info
    bubbleBox = document.createElement("div");

    // set style
    bubbleBox.style.visibility="hidden"; // ← CRITICAL trick: make it hidden till mouse over
    bubbleBox.style.position="fixed";
    bubbleBox.style.top="1ex";
    bubbleBox.style.left="1ex";
    bubbleBox.style.borderRadius="30px";
    bubbleBox.style.backgroundColor="silver";

    // insert into DOM
    bubbleBox.appendChild(document.createTextNode("i'm nothing"));
    document.body.insertBefore(bubbleBox, document.body.firstChild);
}

function assignHandler () {
    var hoverEle = document.getElementById("t42310");
    // assign handler
    hoverEle.addEventListener("mouseover", bubbleActivate , false);
    hoverEle.addEventListener("mouseout", bubbleDeactivate , false);
}

function bubbleActivate (evt) {

    // get the position of the hover element
    var boundBox = evt.target.getBoundingClientRect();
    var coordX = boundBox.left;
    var coordY = boundBox.top;

    // adjust bubble position
    bubbleBox.style.left=  (coordX + 40).toString() + "px";
    bubbleBox.style.top= (coordY + 40).toString() + "px";

    // add bubble content. Can be any HTML
    bubbleBox.innerHTML = "<span style='font-size:12ex;color:red'>" + "♥" + "</span>";

    // make bubble VISIBLE
    bubbleBox.style.visibility="visible";
}

function bubbleDeactivate(evt) {
    bubbleBox.style.visibility="hidden";
}

// ------------------------------
// initialization

// the tooltip element.
var bubbleBox;

// create the element
createTooltipElement();

// assign mouse over event to handler
assignHandler();

Here's how it works:

  1. Use JavaScript to create a HTML element. This will be your tooltip box.
  2. Make the tooltip box invisible, by setting CSS visibility:hidden.
  3. Set the tooltip box on its own layer (CSS position:fixed), so that it doesn't interfere with other elements on the page.
  4. Assign function/handler to the “mouse over” and “mouse out” events, for elements that you want tooltip box to appear.
  5. The function to activate the tooltip, will change tooltip's CSS so it's visible (visibility:visible), and also position it near the mouse. Also add whatever content you want to the tooltip.
  6. The function to deactivate the bubble, will change the tooltip's CSS so it's invisible again.

If you have trouble understanding the code, here's some detail on how to do each step:

That's it!

For a more complex example of bubble box, see: Unicode: Stars, Crosses, Dingbats ★ ♥ ✜ ☪ ☯ ☺ ☠.

blog comments powered by Disqus