Trong này tôi hướng dẫn, tôi sẽ cho bạn thấy cách để tạo css Tooltip javascript này mà không cần sử dụng rất đơn giản và hiệu quả kỹ thuật. Tôi hy vọng bạn sẽ thưởng thức những bài đăng này.

Sau đây là Screenshot

Bước: 1 Mã số cơ bản Css

 ; 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% bình thường Arial, Helvetica, sans-serif;) p (color: # 666; font-size: 12px; line-height: 150%; margin: 0 0 10px 0;) # trang (margin: 0 auto; width: 550px;) 

Sau đây là kỳ diệu mã

 : #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; / * màu nền cho IE * / text-decoration: none;) một. Tooltip span (display: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;) một. Tooltip: hover span (display: inline; vị trí: tuyệt đối; nền: # F20F27; border: 1px solid # C30018; color: # fff;) 

Bước: 2 cơ bản HTML Cơ cấu tổ chức

 > <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.  Trong một neque eu tortor lacinia rhoncus.  Trong 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.  Trong một neque eu tortor lacinia rhoncus.  class = "tooltip" > placerat <SPAN> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Trong interdum <a href = "#" lớp "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.  Trong một neque eu tortor lacinia rhoncus.  Lorem interdum Trong 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> 

Cuối cùng chúng tôi đã tạo ra ba cột css bố trí.
Tải về | Xem Demo

Xin vui lòng chia sẻ ý kiến với chúng tôi, chúng tôi muốn nghe từ bạn ...

Filed under: Css, Hướng dẫn bởi admin