Selles i tutorial Ma näitan sulle, kuidas luua CSS Tooltip ilma JavaScripti see väga lihtne ja tõhus meetod. Loodan, et meeldib see postitus.

Siin on pilt

Samm: 1 Peamised Css Kood

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

Siin on maagiline kood

 : #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;) a: hover (background: # fff; / * tausta värv IE * / text-decoration: none;). Tooltip span (kuva: 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;) 

Samm: 2 Basic HTML struktuur

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

Lõpuks oleme loonud kolm veergu CSS kujundus.
Download | Vaata demo

Palun jagage oma kommentaare siin, me tahame teada, mis te ...

Filed under: Css, Tutorials admin