tooltip using css and html (balloon)

css

.tooltip {

position: relative;

display: inline-block;

border: 1px dotted red;

padding: 10px;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 128px;

height: 28px;

background-color: black;

border: 1px solid red;

color: #fff;

text-align: center;

border-radius: 8px;

padding: 5px 0;

/* Position the tooltip */

position: absolute;

z-index: 1;

}

.tooltip:hover .tooltiptext {

visibility: visible;

top: -0px;

right: 115%;

}

.tooltip .tooltiptext::after {

content: " ";

position: absolute;

top: 50%;

left: 100%; /* To the right of the tooltip */

margin-top: -5px;

border-width: 5px;

border-style: solid;

border-color: transparent transparent transparent black;

}

.tooltip .tooltiptext {

opacity: 0;

transition: opacity 1s;

}

.tooltip:hover .tooltiptext {

opacity: 1;

}

html

<div class="tooltip">Hover over me

<span class="tooltiptext">Tooltip text</span>

</div>