CSS Tooltip Arrows

Tooltip Arrows

Borders can draw an arrow that makes a tooltip resemble a speech bubble. Start with the ::after pseudo-element and the content property to place empty content after the tooltip, then shape it into an arrow on whichever side you choose.

Bottom Arrow

In this first example, the arrow is added to the tooltip's bottom edge.

Example

The tooltip shows up above the text, and its arrow points down.

Create a tooltip with a bottom arrow. Show a container with text "Hover over me" that reveals a tooltip above with the text "Tooltip text". Use the ::after pseudo-element on the tooltip to create a downward-pointing arrow using CSS borders. The arrow should be centered at the bottom of the tooltip.

> Output: complete HTML page

Prompt

Create a tooltip with a bottom arrow. Show a container with text "Hover over me" that reveals a tooltip above with the text "Tooltip text". Use the ::after pseudo-element on the tooltip to create a downward-pointing arrow using CSS borders. The arrow should be centered at the bottom of the tooltip.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Tooltip Arrows</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

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

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

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

<h2>Bottom Arrow 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>

Example Explained

The arrow's position is set inside the tooltip: top: 100% puts it at the bottom, and left: 50% centers it.

Note: The arrow's size comes from border-width. Whenever you change that value, change margin-left to match, or the arrow will no longer be centered.

What turns the content into an arrow is border-color: the top border is set to black and the others to transparent. With black on every side, the result would be a black square box.

Top Arrow

Here the arrow moves up to the tooltip's top edge. Note that the color now goes on the bottom border instead.

Example

Create a tooltip with a top arrow. Show a container with text "Hover over me" that reveals a tooltip below with the text "Tooltip text". Use the ::after pseudo-element on the tooltip to create an upward-pointing arrow using CSS borders. The arrow should be centered at the top of the tooltip.

> Output: complete HTML page

Prompt

Create a tooltip with a top arrow. Show a container with text "Hover over me" that reveals a tooltip below with the text "Tooltip text". Use the ::after pseudo-element on the tooltip to create an upward-pointing arrow using CSS borders. The arrow should be centered at the top of the tooltip.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Tooltip Arrows</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

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

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

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

<h2>Top Arrow 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 Arrow

This time the arrow is attached to the left side of the tooltip.

Example

Create a tooltip with a left arrow. Show a container with text "Hover over me" that reveals a tooltip to the right with the text "Tooltip text". Use the ::after pseudo-element on the tooltip to create a left-pointing arrow using CSS borders. The arrow should be vertically centered on the left side of the tooltip.

> Output: complete HTML page

Prompt

Create a tooltip with a left arrow. Show a container with text "Hover over me" that reveals a tooltip to the right with the text "Tooltip text". Use the ::after pseudo-element on the tooltip to create a left-pointing arrow using CSS borders. The arrow should be vertically centered on the left side of the tooltip.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Tooltip Arrows</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  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: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

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

<h2>Left Arrow 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>

Right Arrow

The last variation puts the arrow on the right side of the tooltip.

Example

Create a tooltip with a right arrow. Show a container with text "Hover over me" that reveals a tooltip to the left with the text "Tooltip text". Use the ::after pseudo-element on the tooltip to create a right-pointing arrow using CSS borders. The arrow should be vertically centered on the right side of the tooltip.

> Output: complete HTML page

Prompt

Create a tooltip with a right arrow. Show a container with text "Hover over me" that reveals a tooltip to the left with the text "Tooltip text". Use the ::after pseudo-element on the tooltip to create a right-pointing arrow using CSS borders. The arrow should be vertically centered on the right side of the tooltip.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Tooltip Arrows</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  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: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

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

<h2>Right Arrow 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>