Tooltip custom

by padma rubhan

HTML

<div>
  <div class="tooltip">Hover over me1
    <span class="tooltiptext">
      <div class=""><b>Account:</b>account1  	<div class=""><b>Account:</b>account</div>
      <div class=""><b>Account:</b>account</div>
      <div class=""><b>Account:</b>account</div>
  </div>
    </span>
  </div>
</div>

<div>
<div class="tooltip">Hover over me2
  <span class="tooltiptext">
  	<div class=""><b>Account:</b>account 	<div class=""><b>Account:</b>account</div>
  	<div class=""><b>Account:</b>account2</div>
  	<div class=""><b>Account:</b>account</div>
</div>
  </span>
</div>
</div>


<div class="tooltip">Hover over me3
  <span class="tooltiptext">
  	<div class=""><b>Account:</b>account  	<div class=""><b>Account:</b>account</div>
  	<div class=""><b>Account:</b>account1</div>
  	<div class=""><b>Account:</b>account</div>
</div>
  </span>
</div>

CSS

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #efefef;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  top: -100px;
  left: 50px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}