Tool tip in html

Question

I have a div that needs to be identified using a line and box(which will contain a message) like in the below mockup image.2 and 3(Line and a rectangular box) are fixed to each

Answer 1

Here's some CSS. For the tool tip container use class="tooltip" and for the of the tool tip text use class="tooltiptext".

.tooltip{position:relative;display:inline-block;
border-bottom: 1px dotted black; /* if you want dots under the hoverable text */
}
.tooltip .tooltiptext{visibility:hidden;width:120px;
background: #555; /* or whatever color you want the tool tip background to be */
color: #fff; /* or whatever color you want the tool tip text to be */
text-align:center;padding:5px 0;border-radius:6px;position:absolute;
z-index:1;bottom:125%;left:50%;margin-left:-60px;opacity:0;transition:opacity 0.3s;}
.tooltip .tooltiptext::after{content:"";
position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;
border-style:solid;border-color:#555 transparent transparent transparent;}
.tooltip:hover .tooltiptext{visibility:visible;opacity:1;}