PlayOn
| Subject: Ultimate Tooltips Tue Jun 28, 2011 12:22 am |
| TUTORIAL: Pasul 1). Inserati codul urmator in: CSSPanou de administrare > Afisare > Imagini si culori < Culori > Foaie de stil CSS - Code:
-
.tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; } .tooltip span { margin-left: -999em; position: absolute; } .tooltip:hover span { border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; } .tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; } .tooltip:hover em { font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; } .classic { padding: 0.8em 1em; } .custom { padding: 0.5em 0.8em 0.8em 2em; } * html a:hover { background: transparent; } .classic {background: #FFFFAA; border: 1px solid #FFAD33; } .critical { background: #FFCCAA; border: 1px solid #FF3334; } .help { background: #9FDAEE; border: 1px solid #2BB0D7; } .info { background: #9FDAEE; border: 1px solid #2BB0D7; } .warning { background: #FFFFAA; border: 1px solid #FFAD33; } | Pasul 2). Pentru a putea fi executat pe orice pagina vom folosi class="tooltip"EXEMPLU:
- Code:
-
<a class="tooltip" href="#">Classic<span class="classic">Continut continut Continut continut Continut continut Continut continut Continut continut </span></a>, <a class="tooltip" href="#">Critical<span class="custom critical"><img src="http://i73.servimg.com/u/f73/12/63/64/97/critic10.png" alt="Error" height="48" width="48" /><em>Critical</em>Continut continut Continut continut Continut continut Continut continut Continut continut </span></a>, <a class="tooltip" href="#">Help<span class="custom help"><img src="http://i73.servimg.com/u/f73/12/63/64/97/help10.png" alt="Help" height="48" width="48" /><em>Help</em>Continut continut Continut continut Continut continut Continut continut Continut continut </span></a>, <a class="tooltip" href="#">Informatie<span class="custom info"><img src="http://i73.servimg.com/u/f73/12/63/64/97/info10.png" alt="Informatie" height="48" width="48" /><em>Informatie</em>Continut continut Continut continut Continut continut Continut continut Continut continut </span></a> si <a class="tooltip" href="#">Atentie<span class="custom warning"><img src="http://i73.servimg.com/u/f73/12/63/64/97/warnin10.png" alt="Atentie" height="48" width="48" /><em>Atentie</em>Continut continut Continut continut Continut continut Continut continut Continut continut </span></a></p> | DEMONSTRATIE: INFORMATII:
> Daca acel cod nu va functiona va rugam sa verificati codul ! > Pentru price problema intampinata la codul noStru va rugam se ne atrageti atentia !
|
|
|