The CSS arrow is used to add an array along with tooltip. It makes the tooltip like a speech bubble. It can also be represented in four ways:
- Top arrow
- Bottom arrow
- Left arrow
- Right arrow
CSS Top Arrow
The upper arrow feature is utilized to incorporate an arrow-shaped design at the tooltip's top when hovering the mouse cursor over the element. This action triggers the tooltip to appear below the element.
See this example:
<!DOCTYPE html>
<html>
<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>
<body style="text-align:center;">
<h2>Top Arrow Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong>Welcom to C# Tutorial</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>
CSS Bottom Arrow
The lower arrow is employed to incorporate an arrow-shaped design at the bottom of the tooltip as you hover the mouse over the element. This action will result in the tooltip appearing above the element.
See this example:
<!DOCTYPE html>
<html>
<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>
<body style="text-align:center;">
<h2>Bottom Arrow Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong>Welcom to C# Tutorial</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>
CSS Left Arrow
The left arrow feature is employed to introduce an arrow-shaped element on the left side of the tooltip when the mouse cursor is hovered over the element. This action triggers the display of the tooltip on the right side of the element.
See this example:
<!DOCTYPE html>
<html>
<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>
<body style="text-align:center;">
<h2>Left Arrow Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong>Welcom to C# Tutorial</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>
CSS Right Arrow
The "right arrow" symbol is employed to create an arrow-like feature positioned to the right of the tooltip when the user hovers the mouse over the element. This action triggers the display of the tooltip on the left side of the element.
See this example:
<!DOCTYPE html>
<html>
<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>
<body style="text-align:center;">
<h2>Right Arrow Example</h2>
<p>Move your mouse cursor over the below heading</p>
<div class="tooltip"><strong>Welcom to C# Tutorial</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>