Neste tutorial eu vou mostrar-lhe como criar CSS tooltip sem usar javascript esta muito simples e eficaz. Espero que gostem deste post.

Aqui está a Screenshot

Etapa: 1 Basic código CSS

  ; 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;) 

Aqui está a magia código

 : #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; / * cor de fundo para IE * / text-decoration: none;) um. tooltip span (display: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;) um. tooltip: hover span (display: inline; posição: absoluto; background: # F20F27; 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, consectetur adipiscing elit.  Ut viverra dui nec risus.  Em uma eu neque tortor lacinia rhoncus.  Em 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.  Em uma eu neque tortor lacinia rhoncus.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Em interdum <a href = "#" 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.  Em uma eu neque tortor lacinia rhoncus.  Em 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> 

Finalmente criámos três coluna css layout.
Download | Ver Demo

Por favor, compartilhe seus comentários conosco, Adoraríamos ouvir de você ...

Arquivado sob: Css, Tutorials por admin