CSS Tooltip

When the user moves the mouse pointer over an element, a CSS tooltip can reveal extra information about it.

CSS Create a Basic Tooltip

A basic tooltip has two parts, one in HTML and one in CSS, and appears when the mouse moves over an element.

HTML: Add the "tooltip" class to a container element (like <div>); hovering over it is what triggers the tooltip text. That text lives in an inline element (like <span>) carrying the tooltiptext class.

CSS: Because the tooltip text uses position: absolute, the tooltip class needs position: relative. The tooltiptext class contains the text itself, keeping it hidden until a hover makes it visible. That hover is detected with the :hover selector, which reveals the text when the mouse is over the <div> with the tooltip class.

Example

Create a basic CSS tooltip that appears when the user hovers over text. Use a container with position:relative and a hidden span with position:absolute that becomes visible on hover. Style the tooltip with a black background, white text, centered alignment, padding, and rounded corners.

> Output: complete HTML page

Prompt

Create a basic CSS tooltip that appears when the user hovers over text. Use a container with position:relative and a hidden span with position:absolute that becomes visible on hover. Style the tooltip with a black background, white text, centered alignment, padding, and rounded corners.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Basic CSS Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body>

<h2>Basic Tooltip</h2>

<p>Move the mouse over the text below:</p>

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

</body>
</html>

Positioning the Tooltip

A tooltip can go wherever you want it. The examples below place it to the right, left, top, and bottom of the hoverable element.

Right-aligned tooltip

left: 105% puts the tooltip on the right side. Vertical centering comes from top: -5px, which matches the tooltip text's 5px top and bottom padding.

Create a CSS tooltip positioned to the right of the hoverable text. Use left:105% to place the tooltip to the right and top:-5px to vertically center it relative to the container.

> Output: complete HTML page

Prompt

Create a CSS tooltip positioned to the right of the hoverable text. Use left:105% to place the tooltip to the right and top:-5px to vertically center it relative to the container.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Right Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body>

<h2>Right Tooltip</h2>

<p>Move the mouse over the text below:</p>

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

</body>
</html>

Left-aligned tooltip

right: 105% puts the tooltip on the left side, and top: -5px again centers it vertically.

Create a CSS tooltip positioned to the left of the hoverable text. Use right:105% to place the tooltip to the left and top:-5px to vertically center it relative to the container.

> Output: complete HTML page

Prompt

Create a CSS tooltip positioned to the left of the hoverable text. Use right:105% to place the tooltip to the left and top:-5px to vertically center it relative to the container.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Left Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
  margin-left: 200px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body>

<h2>Left Tooltip</h2>

<p>Move the mouse over the text below:</p>

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

</body>
</html>

Top-aligned tooltip

With bottom: 100% the tooltip sits above the element. Half of its 130px width (130 / 2 = 65) gives the margin-left: -65px that centers it.

Create a CSS tooltip positioned above the hoverable text. Use bottom:100% and margin-left:-65px to center the 130px-wide tooltip above the container element.

> Output: complete HTML page

Prompt

Create a CSS tooltip positioned above the hoverable text. Use bottom:100% and margin-left:-65px to center the 130px-wide tooltip above the container element.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -65px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body>

<h2>Top Tooltip</h2>

<p>Move the mouse over the text below:</p>

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

</body>
</html>

Bottom-aligned tooltip

With top: 100% the tooltip sits below the element. It is centered by margin-left: -65px, half of its 130px width (130 / 2 = 65).

Create a CSS tooltip positioned below the hoverable text. Use top:100% and margin-left:-65px to center the 130px-wide tooltip below the container element.

> Output: complete HTML page

Prompt

Create a CSS tooltip positioned below the hoverable text. Use top:100% and margin-left:-65px to center the 130px-wide tooltip below the container element.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bottom Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -65px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
</head>
<body>

<h2>Bottom Tooltip</h2>

<p>Move the mouse over the text below:</p>

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

</body>
</html>

Fade-in Tooltip

A fade-in comes from pairing the CSS transition and opacity properties. Over a set number of seconds (here, 2), the tooltip moves from completely invisible (opacity: 0) to fully visible (opacity: 1).

Example

Create a CSS tooltip that fades in when hovered. Use the CSS transition property on opacity, going from opacity:0 to opacity:1 over 2 seconds when the user hovers over the container.

> Output: complete HTML page

Prompt

Create a CSS tooltip that fades in when hovered. Use the CSS transition property on opacity, going from opacity:0 to opacity:1 over 2 seconds when the user hovers over the container.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fade-in Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -65px;
  opacity: 0;
  transition: opacity 2s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
</head>
<body>

<h2>Fade-in Tooltip</h2>

<p>Move the mouse over the text below:</p>

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

</body>
</html>