En este I I tutorial le mostrará cómo crear tooltip css sin utilizar esta técnica muy sencilla y eficaz javascript. Espero que disfruten de este puesto.

Aquí está la captura de pantalla

Paso: 1 Basic Código CSS

  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; } body (font: 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á el código de la magia

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

Paso: 2 HTML básico Estructura

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus.  En la UE un neque rhoncus tortor lacinia.  En interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus.  En la UE un neque rhoncus tortor lacinia.  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 elit.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus.  En la UE un neque rhoncus tortor lacinia.  En interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus. </ SPAN> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> </ div> 

Por último, hemos creado tres columnas de diseño CSS.
Descargar | Ver Demo

Por favor, comparta sus comentarios con nosotros, nos encantaría saber de usted ...

Filed under: Css, Tutoriales por admin