Css Tooltip senza utilizzare Javascript
In questo i tutorial vi mostrerò come creare css tooltip senza l'uso di javascript molto semplice ed efficace tecnica. Mi auguro che si gode questo post.
Qui trovate l'Screenshot
Fase: 1 codice CSS di base
; 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% normale Arial, Helvetica, sans-serif;) p (color: # 666; font-size: 12px; line-height: 150%; margin: 0 0 10px 0;) # pagina (margin: 0 auto; width: 550px;)
Ecco la magia di codice
: #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; / * colore di sfondo per IE * / text-decoration: none;) uno. tooltip span (display: none; padding: 5px 5px; margin-left: 3px; margin-top: 10px; width: 170px; font-size: 12px; line-height: 150%;) uno. tooltip: hover span (display: inline; position: absolute; background: # F20F27; border: 1px solid # C30018; color: # fff;)
Fase: 2 Struttura HTML di base
> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div id = "page"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nca risus. In uno tortor eu neque lacinia rhoncus. In interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nca 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 nca risus. In uno tortor eu neque 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 nca 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 nca risus. In uno tortor eu neque lacinia rhoncus. In interdum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nca risus. </ SPAN> </ a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti.Lorem ipsum dolor sit amet, </ p> </ div>
Infine abbiamo creato tre colonna css layout.
Download | Visualizza Demo
Si prega di condividere le tue osservazioni con noi, ci piacerebbe sentire da voi ...
Articoli correlati:
se vi sia piaciuto leggere questo articolo, si prega di controllare anche gli altri articoli correlati qui sotto:
Invia un commento