Tool tip expanding box - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Box

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Box

Description

Tool tip expanding box

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">
.tool-tip {<!--from ww w . j  av a 2 s.c o m-->
   color:Chartreuse;
   background-color:yellow;
   text-shadow:none;
   font-size:.9em;
   visibility:hidden;
   -webkit-border-radius:8px;
   -moz-border-radius:8px;
   -o-border-radius:8px;
   border-radius:8px;
   text-align:center;
   opacity:0;
   z-index:1000;
   padding:4px 9px;
   position:absolute;
   cursor:default;
   -webkit-transition:all 241ms ease-in-out;
   -moz-transition:all 241ms ease-in-out;
   -ms-transition:all 241ms ease-in-out;
   -o-transition:all 241ms ease-in-out;
   transition:all 241ms ease-in-out;
}

.tool-tip,
.tool-tip.top {
   top:auto;
   bottom:115%;
   left:51%;
}

.tool-tip.top:after,
.tool-tip:after {
   position:absolute;
   bottom:-13px;
   left:51%;
   margin-left:-8px;
   content:' ';
   height:0px;
   width:0px;
   border:7px solid blue;
   border-top-color:pink;
}

.tool-tip,
.tool-tip.top {
   margin-left:-44px;
}

.tool-tip.right {
   top:16px;
   right:auto;
   left:107%;
   margin-top:-13px;
   margin-right:auto;
   margin-left:auto;
}

.tool-tip.right:after {
   left:-6px;
   top:12px;
   margin-top:-7px;
   bottom:auto;
   border-top-color:OrangeRed;
   border-right-color:grey;
}

*:not(.on-focus):hover>.tool-tip,
.on-focus input:focus + .tool-tip {
   visibility:visible;
   opacity:2;
   -webkit-transition:all 241ms ease-in-out;
   -moz-transition:all 241ms ease-in-out;
   -ms-transition:all 241ms ease-in-out;
   -o-transition:all 241ms ease-in-out;
   transition:all 241ms ease-in-out;
}

*:not(.on-focus)>.tool-tip.slideIn,
.on-focus>.tool-tip {
   display:inline-table;
}

.on-focus>.tool-tip.slideIn {
   z-index:-2;
}

.on-focus>input:focus + .tool-tip.slideIn {
   z-index:2;
}

*:not(.on-focus)>.tool-tip.slideIn.right,
.on-focus>.tool-tip.slideIn.right {
   left:51%;
}

*:not(.on-focus):hover>.tool-tip.slideIn.right,
.on-focus>input:focus + .tool-tip.slideIn.right {
   left:106%;
}
</style> 
 </head> 
 <body> 
  <div class="on-focus clearfix" style="position: relative; padding: 0px; float: left"> 
   <input type="text" value="" name="try" placeholder="Tooltip right on focus"> 
   <div class="tool-tip slideIn right">
     Lorem ipsum dolor sit ame 
    <br> 
    <br> 
    <br>Lorem ipsum dolor sit 
    <br> 
    <br> 
    <br>Lorem ipsum dolor sit a 
   </div> 
  </div> 
  <br> 
  <br> 
  <div class="on-focus clearfix" style="position: relative; padding: 0px; float: left"> 
   <input type="text" value="" name="try" placeholder="Tooltip right on focus"> 
   <div class="tool-tip slideIn right">
     Lorem ipsu 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials