F'dan i i tutorja ser nuruk kif toħloq tooltip css javascript mingħajr l-użu ta 'teknika ta' dan sempliċi ħafna u effettiv. Nispera li jgawdu din il-kariga.

Hawn hu l-Screenshot

Pass: 1 Prinċipji bażiċi css Kodiċi

  ; padding : 0 ; } * (Margin: 0; padding: 0;)
 % normal Arial, Helvetica, sans-serif ; } korp (font: 100% Arial normali, Helvetica, sans-Serif;)
 : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } p (color: # 666; font-size: 12px;-linja tal-għoli: 150%; margin: 0 0 10px 0;)
 margin : 0 auto ; width : 550px ; } # page (margin: 0 auto; wisa ': 550px;) 

Hawn hu l-kodiċi magic

 : #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: imbagħad jerġgħu (background: # F; / * sfond bil-kulur għall-IE * / text-decoration: none;) a span tooltip. (display: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; wisa ': 170px; font-size: 12px;-linja tal-għoli: 150%;) a. tooltip: span imbagħad jerġgħu (display: inline; pożizzjoni: assoluti; background: # F20F27; transkonfinali: 1px solidi # C30018; color: # F;) 

Pass: 2 Bażiku HTML Struttura

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> dolor Ipsum Lorem ipoġġu amet, elit adipiscing consectetur.  Ut viverra dui nec risus.  Fil neque eu a rhoncus lacinia tortor.  Fil interdum dolor Ipsum Lorem ipoġġu, consectetur elit amet adipiscing.  Ut viverra dui nec risus. </ SPAN> </ a> dolor Ipsum Lorem ipoġġu amet, elit adipiscing consectetur.  Dolor Suspendisse Ipsum potenti.Lorem ipoġġu amet, </ p> <p> dolor Ipsum Lorem ipoġġu amet, elit adipiscing consectetur.  Ut viverra dui nec risus.  Fil neque eu a rhoncus lacinia tortor.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fil href <a interdum = "#" klassi = "tooltip"> placerat dolor <SPAN> Ipsum Lorem ipoġġu, consectetur elit amet adipiscing.  Ut viverra dui nec risus. </ SPAN> </ a> dolor Ipsum Lorem ipoġġu amet, elit adipiscing consectetur.  Dolor Suspendisse Ipsum potenti.Lorem ipoġġu amet, </ p> <p> dolor Ipsum Lorem ipoġġu amet, elit adipiscing consectetur.  Ut viverra dui nec risus.  Fil neque eu a rhoncus lacinia tortor.  Fil interdum dolor Ipsum Lorem ipoġġu, consectetur elit amet adipiscing.  Ut viverra dui nec risus. </ SPAN> </ a> dolor Ipsum Lorem ipoġġu amet, elit adipiscing consectetur.  Dolor Suspendisse Ipsum potenti.Lorem ipoġġu amet, </ p> </ div> 

Fl-aħħarnett ħloqna tliet tqassim css kolonna.
Download | View Demo

Jekk jogħġbok sehem il-kummenti tiegħek magħna, we'd imħabba biex tisma minn int ...

Iffajljati taħt: css, tutorials by admin