Neste i i tutorial ha amosar como crear tooltip CSS sen usar esta técnica moi sinxela e eficaz javascript. Agardamos que che aproveite este post.

Aquí está o Screenshot

Etapa: 1 Basic Css Código

  ; padding : 0 ; } * (Margin: 0; padding: 0;)
 % normal Arial, Helvetica, sans-serif ; } body (font: normal 100% Arial, Helvetica, sans-serif;)
 : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } p (color: # 666; font-size: 12px; line-height: 150%; margin: 0 0 10px 0;)
 margin : 0 auto ; width : 550px ; } # Page (margin: 0 auto; width: 550px;) 

Aquí está o código máxico

  : #F00 ; font-size : 12px ; } a (color: # F00; font-size: 12px;)

 a: hover ( 
 ; /*background color for IE*/ background: # fff; / * cor de fondo para IE * / 
 text-decoration: none; 
 )
 
 unha extensión de tooltip. ( 
 display: none;
 ; padding: 5px 5px;
 margin-left: 3px; 
 margin-top: 10px; 
 width: 170px;
 font-size: 12px;
 line-height: 150%;
 ) 
 
 span { unha información.: hover span ( 
 display: inline;
 position: absolute;
 ; background: # F20F27;
 #C30018 ; border: 1px solid # C30018;
 ; color: # fff;
 ) 

Etapa: 2 Estrutura básica HTML

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Ut viverra dui nec risus.  En un neque rhoncus lacinia tortor.  En interdum Lorem ipsum dolor sit amet, consectetur adipiscing.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Potenti.Lorem Suspender ipsum dolor sit amet, </ p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Ut viverra dui nec risus.  En un neque rhoncus lacinia tortor.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. En href interdum <a "#" = class = "tooltip"> placerat <span> Lorem ipsum dolor sit amet, consectetur adipiscing.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Potenti.Lorem Suspender ipsum dolor sit amet, </ p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Ut viverra dui nec risus.  En un neque rhoncus lacinia tortor.  En interdum Lorem ipsum dolor sit amet, consectetur adipiscing.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Potenti.Lorem Suspender ipsum dolor sit amet, </ p> </ div> 

Por último, creamos tres esquema css columna.
Descargar | Ver Demo

Por favor, compartir os seus comentarios connosco, Adoraríamos escoitar de ti ...