CSS Tooltip Arrows
This page covers how to add arrows and fade effects to CSS tooltips.
Tooltip Arrows
To create an arrow that should appear from a specific side of the tooltip, add "empty"
content after
tooltip, with the pseudo-element class ::after together with the content
property. The arrow itself is created using borders. This will make the tooltip
look like a speech bubble.
This example demonstrates how to add an arrow to the bottom of the tooltip:
Bottom Arrow
.tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Result:
Example Explained
Position the arrow inside the tooltip: top: 100% will place the arrow at the
bottom of the tooltip. left: 50% will center the arrow.
Note: The border-width property specifies the size of the
arrow. If you change this, also change the margin-left value to the same. This
will keep the arrow centered.
The border-color is used to transform the content into an arrow. We set the
top border to black, and the rest to transparent. If all sides were black, you
would end up with a black square box.
This example demonstrates how to add an arrow to the top of the tooltip. Notice that we set the bottom border color this time:
Top Arrow
.tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Result:
This example demonstrates how to add an arrow to the left of the tooltip:
Left Arrow
.tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Result:
This example demonstrates how to add an arrow to the right of the tooltip:
Right Arrow
.tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Result:
