To add an arrow to a tooltip the CSS Arrow is used, thus giving a tooltip a look like a speech bubble. There are 4 ways to represent a CSS Arrow:
- Top arrow
- Bottom arrow
- Left arrow
- Right arrow
CSS Top Arrow:
To add an arrow on the top of the tooltip, the CSS Top Arrow is used. When the mouse cursor hovers over the element the tooltip is displayed on the bottom of the element.
Example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted red;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: crimson;
color: white;
text-align: center;
border-radius: 6px;
padding: 5px;
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 blue transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Hover the mouse on below text.</h2>
<div class="tooltip">Message for you!!
<span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>
Explanation:
In the above example, we are adding a CSS arrow on the top of a CSS tooltip.
CSS Bottom Arrow:
To add an arrow on the bottom of the tooltip, the CSS Bottom Arrow is used. When the mouse cursor hovers over the element the tooltip is displayed on the top of the element.
Example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted red;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: crimson;
color: white;
text-align: center;
border-radius: 6px;
padding: 5px;
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: blue transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Hover the mouse on below text.</h2>
<div class="tooltip">Message for you!!
<span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>
Explanation:
In the above example, we are adding a CSS arrow on the bottom of a CSS tooltip.
CSS Left Arrow:
To add an arrow on the left of the tooltip, the CSS Left Arrow is used. When the mouse cursor hovers over the element the tooltip is displayed on the right of the element.
Example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted red;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: crimson;
color: white;
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 blue transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Hover the mouse on below text.</h2>
<div class="tooltip">Message for you!!
<span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>
Explanation:
In the above example, we are adding a CSS arrow on the left of a CSS tooltip.
CSS Right Arrow:
To add an arrow on the left of the tooltip, the CSS Right Arrow is used. When the mouse cursor hovers over the element the tooltip is displayed on the left of the element.
Example:
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted red;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: crimson;
color: white;
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 blue;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Hover the mouse on below text.</h2>
<div class="tooltip">Message for you!!
<span class="tooltiptext">Hello!!</span>
</div>
</body>
</html>
Explanation:
In the above example, we are adding a CSS arrow on the right of a CSS tooltip.