CSS Tooltip

Bootstrap Tooltip | html tooltip
Bootstrap Tooltip | html tooltip
CSS Tooltip | html tooltip

here we will learn how to create tooltip using html and css tooltip, here we will duscus about all types of tooltip like Top tooltip, left tooltip, right tooltip and bootom tooltip. here we will know html tooltip.


Use of Tooltip

We use tooltip for showing exatra information about image or any content on mouse over the element.

For Creating tooltip first we have to create a div called mytooltip and in this parent div we have to create another div and set class mytooltiptext, and in this example when we mouse moves over mytooltip div then child class mytooltiptext will appear as tooltip.

First we have to visibility: hidden; for our class .mytooltiptext and its position: absolute; when we mouse over on parent div then we have to make ….

.mytooltip:hover .mytooltiptext 
{
visibility: visible;
}


<h2>Top Tooltip Example</h2>

<div class="mytooltip">Top Tooltip  
  <span class="mytooltiptext">Tooltip text</span>
</div>

<style>
    .mytooltip {
  position: relative;
  background:#f60;
  color:#fff;
  border-radius:2px;
  padding:10px;
  display: inline-block;
  cursor:pointer;
  margin-left:40px;
}

.mytooltip .mytooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  background:#f60;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.mytooltip .mytooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #f60 transparent transparent transparent;
}

.mytooltip:hover .mytooltiptext {
  visibility: visible;
}
</style>

How to create Tooltip using HTML and CSS


Leave a Reply

avatar
  Subscribe  
Notify of