In dit i tutorial zal ik je laten zien hoe u css tooltip zonder javascript deze zeer eenvoudige en effectieve techniek. Ik hoop dat u zult genieten van dit bericht.

Hier is het screenshot

Stap 1 Basic CSS code

 ; 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% normaal Arial, Helvetica, sans-serif;) P (color: # 666; font-size: 12px; line-height: 150%; margin: 0 0 10px 0;) # page (margin: 0 auto; width: 550px;) 

Hier is de magische code

  : #F00 ; font-size : 12px ; } a (color: # F00; font-size: 12px;) 

  a: hover (  
  ; /*background color for IE*/ background: # FFF; / * achtergrondkleur voor IE * /  
  Text-decoration: none;  
  ) 
 
  Een. Tooltip span (  
  Display: none; 
  ; Padding: 5px 5px; 
  Margin-left: 3px;  
  Margin-top: 10px;  
  Width: 170px; 
  Font-size: 12px; 
  Line-height: 150%; 
  )  
 
   span { Een. Tooltip: hover span (  
  Display: inline; 
  Standpunt: absolute; 
  ; achtergrond: # F20F27; 
  #C30018 ; Border: 1px vaste # C30018; 
  ; color: # FFF; 
  ) 

Stap: 2 Basic HTML Structuur

 > <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> Lorem Ipsum dolor sit Amet, consectetur adipiscing elit.  Ut viverra dui neg risus.  In eu neque een tortor lacinia rhoncus.  In interdum Lorem Ipsum dolor sit Amet, consectetur adipiscing elit.  Ut viverra dui neg 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 neg risus.  In eu neque een 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 neg 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 neg risus.  In eu neque een tortor lacinia rhoncus.  Lorem Ipsum in interdum dolor sit Amet, consectetur adipiscing elit.  Ut viverra dui neg risus. </ Span> </ a> Lorem Ipsum dolor sit Amet, consectetur adipiscing elit.  Suspendisse potenti.Lorem Ipsum dolor sit Amet, </ p> </ div> 

Ten slotte hebben we drie kolom css opmaak.
Download | Bekijk Demo

Gelieve uw opmerkingen met ons, wij horen graag van je ...

Geplaatst onder: CSS, Tutorials door admin