Bun venit pe Forumul Andrei

Daca vezi aceasta pagina inseamna ca nu ai cont sau nu esti logat.
Daca doresti doar sa vizualizezi forumul poti apasa pe "x-ul" din dreapta si acesta imagine nu va mai fi afisata.

Pentru o vizualizare cat mai buna a acestui forum recomandam
8
Va uram o zi buna in continuare si o navigare cat mai placuta pe acest forum !


   
AcasaSustineFAQInregistrareConectareCautareCalendar
Twitter



Tooltips folosind pagina CSS

Navigare :: Scripturi si tutoriale :: Scripturi
AutorMesaj
 nick
avatar
Rang: Administrator


MesajSubiect: Tooltips folosind pagina CSS Dum Feb 13, 2011 1:40 am  
Pune acest cod in pagina CSS

Cod:
.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; }



Pentru a posta oriunde pe site vei folosi class="tooltip"

Mai jos ai un exemplu :

Cod:
<a class="tooltip" href="#">Classic<span class="classic">De completat De completat De completat De completat De completat De completat De completat </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>De completat De completat De completat De completat De completat De completat De completat </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>De completat De completat De completat De completat De completat De completat De completat De completat De completat De completat </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>De completat De completat De completat De completat De completat De completat De completat De completat </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>De completat De completat De completat De completat De completat De completat De completat De completat De completat De completat De completat De completat </span></a></p>


Demo:

[Trebuie sa fiti inscris si conectat pentru a vedea acest link], [Trebuie sa fiti inscris si conectat pentru a vedea acest link], [Trebuie sa fiti inscris si conectat pentru a vedea acest link], [Trebuie sa fiti inscris si conectat pentru a vedea acest link] si [Trebuie sa fiti inscris si conectat pentru a vedea acest link]


 ionuz
avatar
Rang: Prieten

Respetarea regulilor 100%

MesajSubiect: Re: Tooltips folosind pagina CSS Joi Apr 19, 2012 10:51 pm  
:LK

*Scrie romaneste
*Sterg mesajele inutile sau scrise cu CAPS
*Nu fa spam
*Linkurile relevante în context sunt binevenite.

Transferul se face din contul dumnevoastra de Paypal




Copyright © 2008-2014 Forumul Andrei. Toate drepturile rezervate. Termeni si conditii
Aspect creat si codat de Alexandru Miron & Nick

.