display tooltip when mouse hover iframe - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Tooltip

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Tooltip

Description

display tooltip when mouse hover iframe

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
.tooltip {<!--from   ww w.  j  av a  2s.c om-->
   position:relative;
   display:inline-block;
   border-bottom:2px dotted Chartreuse;
}

.tooltip .tooltiptext {
   visibility:hidden;
   width:121px;
   background-color:yellow;
   color:blue;
   text-align:center;
   border-radius:7px;
   padding:6px 0;
   position:absolute;
   z-index:2;
   bottom:100%;
   left:51%;
   margin-left:-61px;
}

.tooltip:hover .tooltiptext {
   visibility:visible;
}
</style> 
 </head> 
 <body style="text-align:center;"> 
  <h2>Lorem ipsum dolo</h2> 
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, orn</p> 
  <p>Lorem ipsum dolor sit amet, consectetur </p> 
  <div class="tooltip">
    Lorem ipsum dol 
   <span class="tooltiptext">Lorem ipsum</span> 
   <iframe height="600px" src="https://imgur.com/a/71J1gQZ" width="600px"></iframe> 
  </div>  
 </body>
</html>

Related Tutorials