Home >>CSS Tutorial >CSS Arrow

CSS Arrow

CSS Arrow

The CSS Arrow is used to add a small arrow along with the tooltip, using the pseudo-element class ::after together with the content property.

  • Top arrow
  • Right arrow
  • Bottom arrow
  • Left arrow

Top arrow

The top arrow is used to specify that if you move your mouse cursor over the element it will show you the arrow on the top of the tooltip and display the tooltip on the bottom of the element.

Let's take an example of top arrow:

<!DOCTYPE html>  
<html>  
<style>  
.top-tooltip {  
    position: relative;  
    display: inline-block;  
    border-bottom: 1px dotted black;  
}  
.top-tooltip .top-tooltiptext {  
    visibility: hidden;  
    width: 120px;  
    background-color: #0da0d5;  
    color: #fff;  
    text-align: center;  
    border-radius: 6px;  
    padding: 5px 0;  
    position: absolute;  
    z-index: 1;  
    top: 150%;  
    left: 50%;  
    margin-left: -60px;  
}  
.top-tooltip .top-tooltiptext::after {  
    content: "";  
    position: absolute;  
    bottom: 100%;  
    left: 50%;  
    margin-left: -5px;  
    border-width: 5px;  
    border-style: solid;  
    border-color: transparent transparent #0da0d5 transparent;  
}  
.top-tooltip:hover .top-tooltiptext {  
    visibility: visible;  
}  
</style>  
<body>  
<h2>Top Arrow</h2>  
<p>Move your mouse cursor over the below text.</p>  
<div class="top-tooltip"><strong>hover me..</strong>  
<span class="top-tooltiptext">Welcome to phptpoint</span>  
</div>  
</body>  
</html>
Output:

Top Arrow

Move your mouse cursor over the below text.

hover me.. Welcome to phptpoint

Right arrow

The right arrow is used to specify that if you move your mouse cursor over the element it will show you the arrow on the right of the tooltip and display the tooltip on the left of the element.

Let's take an example of right arrow:

<!DOCTYPE html>  
<html>  
<style>  
.right-tooltip {  
    position: relative;  
    display: inline-block;  
    border-bottom: 1px dotted black;  
}  
.right-tooltip .right-tooltiptext {  
    visibility: hidden;  
    width: 120px;  
    background-color: #0da0d5;  
    color: #fff;  
    text-align: center;  
    border-radius: 6px;  
    padding: 5px 0;  
    position: absolute;  
    z-index: 1;  
    top: -5px;  
    right: 110%;  
}  
.right-tooltip .right-tooltiptext::after {  
    content: "";  
    position: absolute;  
    top: 50%;  
    left: 100%;  
    margin-top: -5px;  
    border-width: 5px;  
    border-style: solid;  
    border-color: transparent transparent transparent #0da0d5;  
}  
.right-tooltip:hover .right-tooltiptext {  
    visibility: visible;  
}  
</style>  
<body>  
<h2>Right Arrow </h2>  
<p>Move your mouse cursor over the below text</p>  
<div class="right-tooltip"><strong>Hover me..</strong>  
<span class="right-tooltiptext">Welcome to phptpoint</span>  
</div>  
</body>  
</html>  
Output: right-arrow

Bottom arrow

The bottom arrow is used to specify that if you move your mouse cursor over the element it will show you the arrow on the bottom of the tooltip and display the tooltip on the top of the element.

Let's take an example of bottom arrow:

<!DOCTYPE html>  
<html>  
<style>  
.bottom-tooltip {  
    position: relative;  
    display: inline-block;  
    border-bottom: 1px dotted black;  
}  
.bottom-tooltip .bottom-tooltiptext {  
    visibility: hidden;  
    width: 120px;  
    background-color: #0da0d5;  
    color: #fff;  
    text-align: center;  
    border-radius: 6px;  
    padding: 5px 0;  
    position: absolute;  
    z-index: 1;  
    bottom: 150%;  
    left: 50%;  
    margin-left: -60px;  
}  
.bottom-tooltip .bottom-tooltiptext::after {  
    content: "";  
    position: absolute;  
    top: 100%;  
    left: 50%;  
    margin-left: -5px;  
    border-width: 5px;  
    border-style: solid;  
    border-color: #0da0d5 transparent transparent transparent;  
}  
.bottom-tooltip:hover .bottom-tooltiptext {  
    visibility: visible;  
}  
</style>  
<body style="text-align:center;">  
<h2>Bottom Arrow</h2>  
<p>Move your mouse cursor over the below text</p>  
<div class="bottom-tooltip"><strong>Hover me..</strong>  
<span class="bottom-tooltiptext">Welcome to phptpoint</span>  
</div>  
</body>  
</html>
Output:

Bottom Arrow

Move your mouse cursor over the below text

Hover me.. Welcome to phptpoint

Left arrow

The left arrow is used to specify that if you move your mouse cursor over the element it will show you the arrow on the left of the tooltip and display the tooltip on the right of the element.

Let's take an example of Left arrow:

<!DOCTYPE html>  
<html>  
<style>  
.let-tooltip {  
    position: relative;  
    display: inline-block;  
    border-bottom: 1px dotted black;  
}  
.let-tooltip .let-tooltiptext {  
    visibility: hidden;  
    width: 120px;  
    background-color: #0da0d5;  
    color: #fff;  
    text-align: center;  
    border-radius: 6px;  
    padding: 5px 0;  
    position: absolute;  
    z-index: 1;  
    top: -5px;  
    left: 110%;  
}  
.let-tooltip .let-tooltiptext::after {  
    content: "";  
    position: absolute;  
    top: 50%;  
    right: 100%;  
    margin-top: -5px;  
    border-width: 5px;  
    border-style: solid;  
    border-color: transparent #0da0d5 transparent transparent;  
}  
.let-tooltip:hover .let-tooltiptext {  
    visibility: visible;  
}  
</style>  
<body>  
<h2>Left Arrow </h2>  
<p>Move your mouse cursor over the below text</p>  
<div class="let-tooltip"><strong>Hover me..</strong>  
<span class="let-tooltiptext">Welcome to phptpoint</span>  
</div>  
</body>  
</html>  
Output:

Left Arrow

Move your mouse cursor over the below text

Hover me.. Welcome to phptpoint

Popular Tutorials