JS: How to Create Tooltip

By Xah Lee. Date: . Last updated: .

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

Hover over me to see tooltip.

Here's the HTML code:

<p>
<span id="hotbox18623">Hover over me</span>
to see tooltip.
</p>

Here's the JavaScript code:

// © 2013, 2019 Xah Lee, http://xahlee.info/
// creating a tooltip

{

const hotbox18623 = document.getElementById("hotbox18623");

// create tooltip element
const ttBox = document.createElement("div");

// set style
ttBox.id = "tooltip88493";
ttBox.style.visibility = "hidden"; // make it hidden till mouse over
ttBox.style.position = "fixed";
ttBox.style.top = "1ex";
ttBox.style.left = "1ex";
ttBox.style.padding = "0.5em";
ttBox.style.width = "30em";
ttBox.style.borderRadius = "1em";
ttBox.style.border = "solid thin gray";
ttBox.style.backgroundColor = "lightgrey";

// insert into DOM
document.body.appendChild(ttBox);

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

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

    // add bubble content. Can include image or link
    ttBox.innerHTML = "some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing some thing.";

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

const ttTurnOff = (() => { ttBox.style.visibility = "hidden"; });

hotbox18623.addEventListener("mouseover", ttTurnOn , false);
hotbox18623.addEventListener("mouseout", ttTurnOff , false);
document.getElementById("tooltip88493") . addEventListener("click", ttTurnOff , false);

}

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!

DOM How-To


Web Scripting Overview


HTML Input


Web Scripting Examples


Web Scripting Misc


jQuery


node.js

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials