CSS Tooltips

CSS Tooltip

A CSS tooltip is used to specify extra information about something when the user moves the mouse pointer over an element:

CSS Create a Basic Tooltip

Create a tooltip that appears when the user moves the mouse over an element:

Example

<style>
/* Tooltip container */
.tooltip {
  position: relative;

display: inline-block;
  border-bottom: 1px dotted
black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text
*/
.tooltiptext {
  visibility: hidden; /*
  Hidden by default */
  width: 130px;

background-color: black;
  color: #ffffff;
  text-align: center;

    padding: 5px 0;

border-radius: 6px;
  position: absolute;

    z-index: 1; /* Ensure tooltip is displayed above
  content */
}

/* Show
the tooltip text on hover */
.tooltip:hover
.tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover
over me

  <span class="tooltiptext">Some
  tooltip
text</span>
</div>

Example Explained

HTML:

• Use a container element (like
  ) and add the "tooltip" class to it. When the user mouse over this

  , it will show the tooltip text.
• The tooltip text is placed inside an inline element (like ) with class="tooltiptext".

CSS:

• The tooltip class use position:relative, which is needed to position the tooltip text (position:absolute). Tip: See examples below on how to position the tooltip.
• The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover.
• The :hover selector is used to show the tooltip text when the user moves the mouse over the
  with class="tooltip".

Positioning the Tooltip

You can position the tooltip as you like. Here we will show how to position the tooltip to the left, right, top and bottom.

Right- and Left-aligned Tooltip

In this example, the tooltip is placed to the right (left:105%) of the "hoverable" text (

  .tooltiptext {
  top: -5px;

left:
105%;
}

  .tooltiptext {
  top: -5px;

right:
105%;
}

  .tooltiptext {
  width: 130px;

bottom: 100%;
  left:
  65%;
  margin-left: -65px; /* Use half of the width
(130/2 = 65), to center the tooltip */
}

 .tooltiptext {
  width: 130px;
  top: 100%;
  left:
50%;
  margin-left: -65px; /* Use half of the width
(130/2 = 65), to center the tooltip */
}

  .tooltiptext {
  opacity: 0;

transition: opacity 2s;
}

.tooltip:hover
.tooltiptext {
  opacity: 1;
}