How do I add a tool tip to a span element?

web-development

responsive-design

css

javascript

byNikita Barsukov·Jan 3, 2025

Use the title attribute to add a tooltip to a span element:

<span title="Tooltip text">Hover over me!</span>

Upon hovering, the tooltip text is showcased.

Beyond the title attribute

Whilst speedy and handy, using the title attribute is somewhat basic. A lack of customization leaves the style and display of the tooltip up to the browser's interpretation. For a higher degree of control, we can leverage the powers of CSS and JavaScript.

Going stylish with CSS tooltips

To add style to the tooltips without involving JavaScript, CSS is your friend. With the :before and :after pseudo-elements, we can create visually appealing tooltips.

/* Tooltip container */
.tooltip { 
  position: relative; 
  display: inline-block; /* Equal to banana for scale */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden; /* Hide and seek champion */
  width: 120px; 
  background-color: #555;
  color: #fff; /* White like fresh snow */
  text-align: center; /* Playing safe in the middle */
  border-radius: 6px; /* Smoothens the rough edges */
  padding: 5px; /* Comfort padding */
  position: absolute; /* Absolute power */
  z-index: 1;
  bottom: 125%; /* Like counting till 125% */
  left: 50%; 
  margin-left: -60px; /* Magic number alert */
  
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s; /* Transitioning like a chameleon */
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%; 
  margin-left: -5px; /* -5px, for the small wins */
  border-width: 5px;
  border-style: solid; /* One does not simply use dashed border for tooltip arrow */
  border-color: #555 transparent transparent transparent; /* Our tiny arrow wearing a transparent cloak */
}

/* Show the tooltip when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Accompanied by a simple span element that houses our tooltip text:

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

Using this method, the tooltip gets centered dynamically based on the hovered element and displays a stylish fade-in effect.

Utilizing attr() function

For dynamic tooltip text, consider embedding the text into the data attribute of your elements.

<span class="tooltip" data-tooltip="Dynamic tooltip text">Hover over me!</span>

We can leverage the attr() function to pull the tooltip text:

.tooltip::after {
  content: attr(data-tooltip);
  /* your additional styling here */
}

If you want to ensure, your tooltip never goes offscreen, a little CSS technique can be helpful. With neat CSS selectors and the rule of specificity, you can have different positionings depending on where your tooltips are in the viewport.

Empowering tooltips with JavaScript and jQuery

For coders who seek special effects, event handling or additional interactions with the tooltips, JavaScript and its libraries such as jQuery UI come in handy. For instance, jQuery UI allows adjusting tooltip positioning, embedding rich content, and managing the showing/hiding delay:

$(function() {
  $(document).tooltip({
    position: {
      my: "left+15 center", 
      at: "right center" 
    }, // Tooltip on the right, that's all right
    show: { 
      effect: "slideDown", 
      delay: 250 
    }, // Delayed yet impactful entrance
    // add more options as per your needs
  });
});