Dans ce tutorial i i va vous montrer comment créer css tooltip sans l'aide de javascript ce très simple et efficace de la technique. J'espère que vous apprécierez ce poste.

Voici la capture d'écran

Étape: 1 base de code CSS

  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; } body (font: 100% normal 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;) 

Voici le code magique

 : #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; / * couleur de fond pour 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;) 

Étape: 2 Structure HTML de base

 > <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.  Dans un neque eu lacinia rhoncus tortor.  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.  Dans un neque eu lacinia rhoncus tortor.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. En 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.  Dans un neque eu lacinia rhoncus tortor.  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> 

Enfin, nous avons créé trois colonnes css layout.
Télécharger | Voir la démo

S'il vous plaît de partager vos commentaires avec nous, nous aimerions entendre parler de vous ...

Classé sous: Css, Tutorials par admin