JavaScript: How to Create Tooltip/Balloon

Xah Lee, 2005-11-30, 2013-04-14

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

Hover over me to see a example.

Here's the HTML code:

<p><span id="t42310">Hover over me</span> to see a example.</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 createBubbleElement () {
    // create balloon element to display info
    bubbleBox = document.createElement("div");
    bubbleBox.appendChild(document.createTextNode("i'm nothing"));

    // 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
    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 bubble element.
// this must be global, because other functions will need to control it
var bubbleBox;

// create the element
createBubbleElement();

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

The code is pretty simple.

Overview

The trick of popup balloon is basically this:

• Use JavaScript to create a HTML element. This will be your Bubble Box (aka balloon, tooltip).
• Make this element invisible, using JavaScript to set CSS. visibility:hidden
• Use CSS to make this Bubble Box into its own layer (position:fixed), so that it doesn't interfere with other elements on the page.
• Assign function/handler to the “mouse over” and “mouse out” events, for elements that you want Bubble Box to appear.
• The function to activate the bubble, will change Bubble Box's CSS so it's visible (visibility:visible), and also position it near the mouse. Also add whatever content you want to the Bubble Box.
• The function to deactivate the bubble, will change the Bubble Box's CSS so it's invisible again.

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

• Creating a element. JavaScript: Insert HTML Element Example
• Using CSS to put a element into a layer, and control position and visibility. CSS Layout ＆ Layers
• Using JavaScript to change a element's CSS. JavaScript: Changing a Element's Style
• Using JavaScript to set a element's content. JavaScript: Changing HTML Content Example
• To assign handlers, see JavaScript: Most Frequently Used DOM Methods.

That's it!

For a more complex example of bubble box, see: Unicode: Dingbats, Cultural Symbols.