I denne i tutorial Jeg vil vise dig, hvordan du opretter css tooltip uden brug af javascript denne meget enkel og effektiv teknik. Jeg håber du vil nyde dette indlæg.

Her er den Skærmaftryk

Trin: 1 Basic Css Kode

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

Her er det magiske kode

 : #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; / * baggrundsfarve for IE * / text-decoration: none;) en. tooltip span (display: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;) en. tooltip: hover span (display: inline; position: absolut; background: # F20F27; border: 1px solid # C30018; color: # FFF;) 

Step: 2 Grundlæggende HTML Struktur

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> lorem ipsum dolor sit amet, consectetur adipiscing Elit.  Ut viverra dui ian risus.  I eu neque en tortor lacinia rhoncus.  I interdum lorem ipsum dolor sit amet, consectetur adipiscing Elit.  Ut viverra dui ian 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 ian risus.  I eu neque en tortor lacinia rhoncus.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. I interdum <a href = "#" class = "tooltip"> placerat <span> lorem ipsum dolor sit amet, consectetur adipiscing Elit.  Ut viverra dui ian 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 ian risus.  I eu neque en tortor lacinia rhoncus.  I interdum lorem ipsum dolor sit amet, consectetur adipiscing Elit.  Ut viverra dui ian risus. </ Span> </ a> lorem ipsum dolor sit amet, consectetur adipiscing Elit.  Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> </ div> 

Endelig har vi oprettet tre kolonne css layout.
Download | View Demo

Please deler dine kommentarer med os, vi vil meget gerne høre fra dig ...

Filed under: Css, Tutorials af admin