Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Add arrow in tooltip with CSS
With CSS, you can add a small arrow to a tooltip using the ::after pseudo-element. The arrow is created by combining the content property with CSS borders to form a triangular pointer that connects the tooltip to its trigger element.
Syntax
.tooltip::after {
content: "";
position: absolute;
border-style: solid;
border-color: tooltip-color transparent transparent transparent;
}
Example: Tooltip with Top Arrow
The following example creates a tooltip that appears above the trigger element with a downward-pointing arrow −
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
margin: 50px;
padding: 10px 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: pointer;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 140px;
background-color: #333;
color: white;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -70px;
}
.tooltip .tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible;
}
</style>
</head>
<body>
<div class="tooltip">Hover over me
<span class="tooltip-text">Tooltip with arrow!</span>
</div>
</body>
</html>
A gray box with "Hover over me" text appears. When you hover over it, a dark tooltip with white text "Tooltip with arrow!" appears above it, connected by a downward-pointing triangular arrow.
How the Arrow Works
The arrow is created using CSS borders. By setting three borders as transparent and one border with color, a triangular shape is formed. The border-color property defines which direction the arrow points −
-
Top arrow (pointing down):
border-color: color transparent transparent transparent -
Bottom arrow (pointing up):
border-color: transparent transparent color transparent -
Left arrow (pointing right):
border-color: transparent transparent transparent color -
Right arrow (pointing left):
border-color: transparent color transparent transparent
Conclusion
Adding arrows to tooltips enhances user experience by visually connecting the tooltip to its trigger element. The ::after pseudo-element with border manipulation provides a clean, CSS-only solution for creating these arrows.
3K+ Views
