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 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, 2016 Xah Lee, http://xahlee.info/
// creating a tooltip

(function () {

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

    // set style
    ttBox.id = "tooltip-id13423";
    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 = "#fdf5e6";

    // insert into DOM

    function ttTurnOn (evt) {
        // get the position of the hover element
        var boundBox = evt.target.getBoundingClientRect();
        var coordX = boundBox.left;
        var 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 = "Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, «and what is the use of a book,» thought Alice «without pictures or conversation?».";

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

    function ttTurnOff(evt) {
        ttBox.style.visibility = "hidden";

    var hoverEle = document.getElementById("t42310");
    // assign handler
    hoverEle.addEventListener("mouseover", ttTurnOn , false);
    hoverEle.addEventListener("mouseout", ttTurnOff , false);
    document.getElementById("tooltip-id13423") . 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!

For a more complex example of tooltip, see: Unicode Characters ☯ ⚡ ∑ ♥ 😄.

Simple DOM Examples

  1. JS: Change CSS
  2. JS: Change Element's Content
  3. JS: Create HTML Element
  4. JS: Remove HTML Element

  1. JS: document.write
  2. JS: Image Rollover
  3. JS: Pop-up New Window
  4. JS: Digital Clock
  5. JS: Stopwatch
  6. JS: Fade a Element
  7. JS: Fade a Element Using CSS Transition
  8. JavaScript UI: Shake Element
  9. JS: How to Create Tooltip
  10. JS: Falling Snow Effect
  11. JavaScript Floating Box Following Scroll
Like what you read? Buy JavaScript in Depth