/    /  CSS Arrow

CSS Arrow

 

This CSS arrow property is used to add an array along with a 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:

 

<!DOCTYPE html>
<html>
<style>
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
font-size:20px;
}
.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>
<h3>Move your mouse cursor over the below heading</h3>
<div class="tooltip"><strong>Welcome to I2Tutorials</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>

 

OUTPUT:

 

CSS Arrow

 

CSS Bottom Arrow:

 

 <!DOCTYPE html>
<html>
<style>
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
font-size:20px;
}
.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>
<h3>Move your mouse cursor over the below heading</h3>
<div class="tooltip"><strong>Welcome to I2Tutorials</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>

 

OUTPUT:

 

CSS Arrow

 

CSS Left Arrow:

 

 <!DOCTYPE html>
<html>
<style>
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
font-size:20px
}
.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>
<h3>Move your mouse cursor over the below heading</h3>
<div class="tooltip"><strong>Welcome to I2Tutorials</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>

 

OUTPUT:

 

CSS Arrow

 

 CSS Right Arrow:

 

 <!DOCTYPE html>
<html>
<style>
.tooltip {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted black;
font-size:20px;
}
.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>
<h3>Move your mouse cursor over the below heading</h3>
<div class="tooltip"><strong>Welcome to I2Tutorials</strong>
<span class="tooltiptext">A solution of all technology</span>
</div>
</body>
</html>

 

OUTPUT:

 

css arrow