Dalam tutorial saya ini saya akan menunjukkan kepada Anda bagaimana untuk membuat tooltip css tanpa menggunakan javascript ini sangat sederhana dan efektif teknik. Saya harap Anda akan menikmati posting ini.

Berikut adalah Screenshot

Langkah: 1 Basic Css Kode

 ; padding : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } p { color : # 666 ; font-size : 12px ; line-height : 150 %; margin : 0 0 10px 0 ; } #page { margin : 0 auto ; width : 550px ; } * (Margin: 0; padding: 0;) body (font: 100% normal Arial, Helvetica, sans-serif;) p (color: # 666; font-size: 12px; line-height: 150%; margin: 0 0 10px 0;) # halaman (margin: 0 auto; width: 550px;) 

Berikut adalah kode ajaib

 : #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; / * warna latar belakang untuk 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;) 

Langkah: 2 Dasar 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 nec risus.  Dalam sebuah neque eu lacinia tortor rhoncus.  Dalam interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus. </ Span> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Potenti.Lorem Suspendisse ipsum dolor sit amet, </ p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus.  Dalam sebuah neque eu lacinia tortor rhoncus.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dalam 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.  Potenti.Lorem Suspendisse ipsum dolor sit amet, </ p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus.  Dalam sebuah neque eu lacinia tortor rhoncus.  Dalam interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Ut viverra dui nec risus. </ Span> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Potenti.Lorem Suspendisse ipsum dolor sit amet, </ p> </ div> 

Akhirnya kami telah membuat tata letak tiga kolom css.
Download | Lihat Demo

Silakan berbagi komentar Anda dengan kami, kami akan senang mendengar dari Anda ...

Filed under: Css, Tutorial oleh admin