How to create Tooltip using HTML and CSS

How to create Tooltip using HTML and CSS
How to create Tooltip using HTML and CSS
How to create Tooltip using HTML and CSS

Hello Friends, Today in this article we will learn how to create tooltip using html and css.

<h2>Basic Popup Examples</h2>
<div class="mytooltip bs">SCHAUHAN TOOLTIP EXAMPLE
  <span class="mytooltiptext">Tooltip text here</span>
</div>
.bs
{
	padding:5px;
	border-radius:5px;
	  -webkit-box-shadow: 0px 0px 19px 0px rgba(230,225,230,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(230,225,230,1);
box-shadow: 0px 0px 19px 0px rgba(230,225,230,1);
}

.mytooltip {
  position: relative;
  font-size:12px;
  cursor:pointer;
  display: inline-block;
}


.mytooltip .mytooltiptext {
  visibility: hidden;
  font-size:12px;
  background-color: #ff3304;
  color: #fff;
  text-align: center;
  padding:10px;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  cursor:pointer;
  transition: opacity 0.3s;
}


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


.mytooltip:hover .mytooltiptext {
  visibility: visible;
  opacity: 1;

}
<h2>Animated Toggle Popup Using Javascript and Css </h2>
<div class="popup bs" onclick="myFunction()">Click Here For toggle popup!
  <span class="popuptext" id="myPopup">This is Popup Example</span>
</div>
<script>
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
</script>
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #ff3304;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}


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


.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}


@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

Leave a Reply

Your email address will not be published. Required fields are marked *