CSS - Tooltips

CSS tooltips are like little boxes of information that appear when you hover the mouse over some element on a webpage.

These tooltips give you more information about a specific element on a web page, only when you hover over an element.

Creating Tooltip

  • We can create tooltops using only CSS and HTML.

  • Set up a tooltip using a container element, such as div.

  • Create a div element and add a CSS class tooltip to it.

  • Place the tooltip text inside an inline element, such as span, using class .tooltiptext.

  • When the user moves the mouse pointer over the container element, the tooltip text inside the span element is displayed.

The following example demonstrates how to create tooltips using CSS. The tooltip is displayed when the user hovers over the text.

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style>
</head>
<body>
   <h2>Hover over the text below to see the tooltip</h2>
   <div class="tooltip">
    Hover over this text
      <span class="tooltiptext">This is a tooltip</span>
   </div>
</body>
</html>

In the above example , the position: relative; property is applied to the .tooltip class. It allows child elements with position: absolute; to be positioned relative to the tooltip container.

.tooltip {
   position: relative;
}

The .tooltiptext class is responsible for styling the tooltip text. It is set to display: none; by default, making it hidden.

When you hover over the parent element .tooltip, this class will become visible.

   .tooltip {
      position: relative;
   }

The :hover pseudo-class is used along with the .tooltip class to make the .tooltiptext class visible when the user hovers over the tooltip container.

   .tooltip:hover .tooltiptext {
      display: block; /* Show the tooltip text on hover */
   }

Positioning Tooltips

Some tooltips have the task of determining the position of the tooltip and ensuring stable placement.

We have four main ways for displaying elements using tooltips.

  • Top Tooltip

  • Bottom Tooltip

  • Right Tooltip

  • Left Tooltip

Top Tooltip

  • This tooltip shows information above the element.

  • When you hover the mouse over some specified element, the tooltip appears above that element on the webpage, displaying text of tooltip.

  • This is known as top tooltip.

The following example demonstrates how to create tooltips that appear at the top of an element when hovered over.

<html>
<head>
   <style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      top: -50px;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style>
</head>
<body>
<h2>Hover over the text to see the top tooltip</h2>
   <div class="tooltip">
   Hover over this text
   <span class="tooltiptext">This is a top tooltip</span>
   </div>
</body>
</html>

Bottom Tooltip

  • This tooltip shows information below the element.

  • When you move the mouse over some specified element, the tooltip appears at the bottom of that element on the webpage, displaying text of tooltip.

  • This is known as bottom tooltip.

The following example demonstrates a tooltip that appears at the bottom of an element when hovered over.

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      top: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style>
</head>
<body>
      <h2>Bottom Tooltip Example</h2>
      <div class="tooltip">
         Hover over this text
         <span class="tooltiptext">This is a bottom tooltip</span>
      </div>
</body>
</html>

Right Tooltip

  • This tooltip is designed to show information to the right of the element.

  • When you move the mouse over some specified element, the tooltip appears on the right side of that element on the webpage, displaying text of tooltip.

  • This is known as right tooltip.

The following example demonstrates a tooltip that appears on the right side of an element when hovered over.

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      top: -5px;
      left: 110%;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
   }
</style>
</head>
<body>
<h2>Right Tooltip Example</h2>
<div class="tooltip">
   Hover over this this text
   <span class="tooltiptext">This is a right tooltip</span>
</div>
</body>
</html>

Left Tooltip

  • This tooltip is designed to show information to the left of the element.

  • When you move the mouse over some specified element, the tooltip appears on the left side of that element on the webpage, displaying text of tooltip.

  • This is known as left tooltip.

The following example demonstartes a tooltip that appears on the left side of an element when hovered over.

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      right: 110%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 0.3s;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style>
</head>
<body>
<body style="text-align:center;">
<h2>Left Tooltip Example</h2>
<div class="tooltip">
   Hover over this text
   <span class="tooltiptext">This is a left tooltip</span>
</div>
</body>
</html>

Tooltip Arrows

To create a tooltip arrow on one side, we use the pseudo-element class ::after along with the content property, adding empty content after the tooltip.

Borders are utilized to craft the arrow, resulting in a tooltip that looks like a speech bubble. Tooltop arrows can be top, botton, right and left as demonstarted in the following sections.

Top Arrow Tooltip

A top arrow tooltip refers to a tooltip that is positioned below the element it is associated with that element.

It includes an arrow pointing upwards to indicate the connection between the tooltip and the element.

The following example shows a top arrow tooltip that appears at the bottom of an element pointing the element when hovered over.

<html>
<head>
<style>
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 120%;
  left: 50%;
  margin-left: -20px;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 20%;
  margin-left: -5px;
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>Top Arrow Tooltip</h2>
<div class="tooltip">Hover over this text
  <span class="tooltiptext">This is Tooltip text with top arrow</span>
</div>
</body>
</html>

Bottom Arrow Tooltip

A bottom arrow tooltip refers to a tooltip that is positioned above the element it is associated with that element.

It includes an arrow pointing downwards to indicate the connection between the tooltip and the element.

The following example shows a bottom arrow tooltip that appears at the top of an element pointing the element when hovered over.

<html>
<head>
<style>
.tooltip {
   position: relative;
   display: inline-block;
}
.tooltip .tooltiptext {
   visibility: hidden;
   width: 150px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   bottom: 125%;
   left: 50%;
   margin-left: -70px;
} 
.tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   margin-left: -5px;
   border-width: 7px;
   border-style: solid;
   border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
   visibility: visible;
}
</style>
</head>
<body style="text-align:center;">
<h2>Bottom Arrow Tooltip</h2><br/><br/>
<div class="tooltip">Hover over this text
   <span class="tooltiptext">This is Bottom arrow tooltip text</span>
</div>
</body>
</html>

Right Arrow Tooltip

A Right arrow tooltip refers to a tooltip that is positioned left side of the element it is associated with that element.

It includes an arrow pointing right to indicate the connection between the tooltip and the element.

The following example demonstrates a right arrow tooltip that appears at the left of an element pointing the element when hovered over.

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 150px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      top: -5px;
      right: 110%;
   }
   .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 35%;
      left: 100%;
      margin-top: -5px;
      border-width: 8px;
      border-style: solid;
      border-color: transparent transparent transparent black;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
   }
</style>
</head>
<body style="text-align:center;">
<h2>Right Arrow Tooltip</h2>
<div class="tooltip">Hover over this text
   <span class="tooltiptext">This is Right Arrow Tooltip text</span>
</div>
</body>
</html>

Left Arrow Tooltip

A left arrow tooltip refers to a tooltip that is positioned right side of the element it is associated with that element.

It includes an arrow pointing left to indicate the connection between the tooltip and the element.

The following example demonstrates a left arrow tooltip that appears at the right of an element pointing the element when hovered over.

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 140px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      top: -5px;
      left: 110%;
      }
   .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 30%;
      right: 100%;
      margin-top: -5px;
      border-width: 8px;
      border-style: solid;
      border-color: transparent black transparent transparent;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
   }
</style>
</head>
<body style="text-align:center;">
<h2>Left Arrow Tooltip</h2>
<div class="tooltip">Hover over this text
   <span class="tooltiptext">This is Left Arrow Tooltip text</span>
</div>
</body>
</html>

Fade in tooltips

The CSS Fade in tooltip or tool tip animation is a tooltip that appears gradually with a fading effect, creating a smooth and visually appealing transition.

To implement a Fade in tooltip in CSS, you can use a combination of CSS transitions and opacity properties.

The following example demonstrates a fade-in tooltip. When you hover, a tooltip will appear. The tooltip will fade in smoothly with a transition effect.

<html>
<head>
<style>
   .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
   }
   .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      opacity: 0;
      transition: opacity 2s;
   }
   .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
   }
</style>
</head>
<body style="text-align:center;">
<h2>Fade-in Tooltip Example</h2> <br/> <br/>
<div class="tooltip">
   Hover over this text
   <span class="tooltiptext">This is a fade-in tooltip</span>
</div>
</body>
</html>

Advantages of Tooltips

  • Tooltips give extra info without making the webpage messy. They help users understand different parts of the webpage better.

  • CSS tooltips can be customized and put in different positions for different screens and devices. This makes them useful for all types of websites, even those that change sizes on different screens.

  • CSS tooltips are highly customizable, it allows developers to style them to match the website's design theme, including colors, fonts, and animations.

  • Implementing CSS tooltips is relatively simple and doesn't require complex JavaScript or additional libraries.

Advertisements