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 ;}
}

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
http://boyledevlet.turkbahis.co Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
http://boyledevlet.turkbahis.co
Guest

Ucuz Kitaplar Nerede Kitap Alabileceğim Siteler