Tooltip jQuery & CSS

Autor: Emanuel. | Subiect : Tooltip jQuery & CSS , Vin Dec 23, 2011 9:53 pm

Descriere:
Există o mulţime de tutoriale referitoare la tooltip plugin-uri ,dar din pacate multe dintre ele ori nu sunt bine explicate ori sunt in ingleza si nu pot fi intelese de toata lumea,de aceia eu m-am deci sa fac acest tutoria si sa va explic mai amanuntit despre ce este vorba.

Demonstratie: Click

CSS:
Pentru inceput trebuie sa adaugam codul urmator in CSS.
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS >Valideaza

Cod:: .tip {
color: #fff;
background:#1d1d1d;
display:none;
padding:10px;
position:absolute;z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;}

.container {
width: 960px;
margin: 0 auto;
overflow: hidden;}

jQuery :
Codul jQuery il puteti adauga ori unde doriti dumneavoastra pe forum , eu am sa va dau un mic exemplu.
Panou de administrare > Afisare > Template-uri > General > overall_header >si adaugati codul dupa

Cod:

<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Codul jQuery :

Cod:: <script type="text/javascript" src="http://emanueltutorials.webs.com/Tooltip%20jQuery.js"></script>
<script type="text/javascript" src="http://emanueltutorials.webs.com/Tooltip.js"></script>

<div class="container">

<a href=" LINK " target="_blank"class="tip_trigger">

<img src=" IMAGINEA NR:1 " >

<span class="tip">

<img src=" IMAGINEA NR:2 ">

</span></a>

Imformati:
Unde vedetii
LINK-treceti adresa dorita de dumneavoastra.
IMAGINEA NR:1-Adaugati prima imagine
IMAGINEA NR:2-Adaugati ce-a dea 2 imagine

Tutorial realizat de: Emanuel

Comentariu