Align Tooltip Next To Input/Label Field - HTML CSS CSS Form

HTML CSS examples for CSS Form:input label

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. input label

Description

Align Tooltip Next To Input/Label Field

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
a.tooltip {<!--  w  ww.j  ava2s. c o  m-->
   border-bottom:2px dotted Chartreuse;
   color:yellow;
   outline:none;
   cursor:help;
   text-decoration:none;
   position:relative;
}

a.tooltip span {
   position:absolute;
   top:3em;
   left:2em;
   width:251px;
   margin-left:-100em;
   opacity:0;
   text-decoration:none!important;
   border-radius:6px;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   box-shadow:3px 3px 11px blue;
   -webkit-box-shadow:3px 3px 11px pink;
   -moz-box-shadow:3px 3px 11px OrangeRed;
   -moz-transition-property:opacity;
   -moz-transition-duration:2s;
   -webkit-transition-property:opacity;
   -webkit-transition-duration:2s;
   -o-transition-property:opacity;
   -o-transition-duration:2s;
}

a.tooltip:hover span {
   font-family:Calibri,Tahoma,Geneva,sans-serif;
   z-index:100;
   margin-left:0;
   opacity:2;
}

a.tooltip.top:hover span {
   top:3em;
   margin-left:auto;
}

a.tooltip img {
   position:absolute;
   border:0;
   margin:-11px 0 0 -56px;
   float:left;
}

a.tooltip em {
   font:701 2.3em Candara,Tahoma,Geneva,sans-serif;
   display:block;
   padding:0.3em 0 0.7em 0;
}

.custom {
   padding:0.6em 0.9em 0.9em 3em;
}

* html a:hover {
   background:transparent;
}

.critical {
   background:grey;
   border:2px solid BlueViolet;
}

.help {
   background:Chartreuse;
   border:2px solid yellow;
}

.info {
   background:blue;
   border:2px solid pink;
   color:OrangeRed;
}

a.tooltip img.static {
   position:static;
   float:none;
   margin:0;
   vertical-align:top;
}
</style> 
 </head> 
 <body> 
  <div class="box"> 
   <ul class="list"> 
    <li> <label for="email"> <span class="mandatoryField">Lo</span>Lorem ipsum dol</label> <input id="email" name="email" class="one-quarter" type="text" onblur="MakeLowerCase(this);"> <a class="tooltip" href="#"> <img class="static" src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Information" height="25" width="25"> <span class="custom info"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="Information" height="48" width="48"> <em>Lorem ipsum</em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam </span> </a> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials