Tässä olen opetusohjelman minä näytän sinulle, miten luoda CSS tooltip ilman javascript tätä hyvin yksinkertaista ja tehokasta tekniikkaa. Toivottavasti nautitte tämän jälkeen.

Tässä on Screenshot

Vaihe: 1 Basic CSS-koodi

  ; padding : 0 ; } * (Margin: 0; padding: 0;) 
  % normal  Arial, Helvetica, sans-serif ; } body (font: 100% normaali 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 ; } # sivu (margin: 0 auto; width: 550px;) 

Tässä on maaginen koodi

 : #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 ; } (color: # F00; font-size: 12px;): hover (background: # FFF; / * taustavärin IE * / text-decoration: none;). työkaluvihje span (display: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;). Tooltip: hover span (display: inline; position: absolute; background: # F20F27, border: 1px solid # C30018, color: # FFF;) 

Vaihe: 2 Basic HTML rakenne

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <font Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut Viverra dui luokittelemattomat risus.  EU neque tortor lacinia rhoncus.  Vuonna interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut Viverra dui luokittelemattomat risus. </ FONT> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ font> <font Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut Viverra dui luokittelemattomat risus.  EU neque tortor lacinia rhoncus.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vuonna interdum <a href = "#" class = "tooltip"> placerat <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut Viverra dui luokittelemattomat risus. </ FONT> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ font> <font Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut Viverra dui luokittelemattomat risus.  EU neque tortor lacinia rhoncus.  Vuonna interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut Viverra dui luokittelemattomat risus. </ FONT> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ font> </ span> 

Lopuksi olemme luoneet kolme saraketta CSS Layout.
Download | View Demo

Ole hyvä ja anna kommentteja, me kiva kuulla sinusta ...

Filed under: Css, Tutorials by admin