i

Learn HTML and CSS in 10 Days

CSS Arrow

It helps in adding up an array along with tooltip. It has four types:

  • Top arrow – This arrow helps in adding an arrow-like structure at the very top of the tooltip.

  • Bottom arrow – This arrow helps in adding an arrow-like structure at the very bottom of the tooltip.

  • Left arrow – This arrow helps in adding an arrow-like structure at the very left of the tooltip.

  • Right arrow – This arrow helps in adding an arrow-like structure at the very right of the tooltip.

Example for CSS Top Arrow:

.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;