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
Selected Reading
Arrow to the top of the tooltip with CSS
The CSS bottom property combined with border styling can be used to create an arrow pointing to the top of a tooltip. This creates a visual connection between the tooltip and its trigger element.
Syntax
.tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
border-width: size;
border-style: solid;
border-color: transparent transparent color transparent;
}
Example
The following example creates a tooltip with an arrow pointing to the top −
<!DOCTYPE html>
<html>
<head>
<style>
.mytooltip {
position: relative;
display: inline-block;
cursor: pointer;
background-color: #f0f0f0;
padding: 10px;
border-radius: 4px;
}
.mytooltip .mytext {
visibility: hidden;
width: 140px;
background-color: #007acc;
color: white;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
top: 150%;
left: 50%;
margin-left: -70px;
}
.mytooltip .mytext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #007acc transparent;
}
.mytooltip:hover .mytext {
visibility: visible;
}
</style>
</head>
<body>
<div class="mytooltip">Hover over me
<span class="mytext">Tooltip with top arrow</span>
</div>
</body>
</html>
A grey box with text "Hover over me" appears. When you hover over it, a blue tooltip with white text "Tooltip with top arrow" appears below it, featuring a triangular arrow pointing upward to the trigger element.
Key Points
- The
::afterpseudo-element creates the arrow shape -
bottom: 100%positions the arrow at the top edge of the tooltip - Border colors create the triangular arrow effect
- The arrow color should match the tooltip background
Conclusion
Creating an arrow at the top of a tooltip enhances user experience by clearly indicating the relationship between the tooltip and its trigger. The technique uses CSS borders and positioning to create the arrow effect.
Updated on: 2026-03-15T12:52:36+05:30
902 Views
Advertisements