همانطور که می دانید، Tooltip ها درواقع توضیحات کوتاهی هستند که با رفتن موس روی عناصر، نمایش داده می شوند. با استفاده از جی کوئری، می توان tooltip های زیبا و جذابی ایجاد نمود.
در ادامه با هم روشی که اینجا برای ایجاد tooltip با جی کوئری معرفی شده است را مرور می کنیم.

پیش نیاز: قبل از هرچیز به کتابخانه ی جی کوئری احتیاج داریم. از اینجا دریافت کنید. (اگر داخل ایران هستید، قادر به دریافت نخواهید بود که در این صورت می توانید از اینجا دریافت کنید).

۱- ایجاد پنجره شناور متنی – نمایش نمونه

برای ایجاد پنجره های شناور متنی، از روش زیر استفاده می کنیم:

ابتدا این اسکریپت را دریافت کنید.

سپس در پرونده HTML ِ خود، در بین تگ head، کدهای زیر را قرار دهید:

<script src="jquery.js" type="text/javascript"></script> 

 <script src="tooltip-text.js" type="text/javascript"></script>

با این کار، کتابخانه جی کوئری و اسکریپتی که دریافت کردید را به صفحه HTML معرفی کردیم.

دستورات سی اس اس زیر را هم اضافه می کنیم:

#tooltip{
position:absolute;
border:1px solid #eee;
background:#f9f9f9;
padding:2px 5px;
color:#999;
display:none;
font: 11px Tahoma;
}

حالا کافی است یک لینک مانند زیر داشته باشیم:

<a class="tooltip" title="یک طراح وب" href="http://aliha.ir/">یک طراح وب</a>

هر لینکی که کلاس ِ آن برابر با tooltip باشد، از این قاعده اطاعت می کند و متنی که در title ِ آن می نویسید را در پنجره شناور نمایش می دهد.

۲- ایجاد پنجره شناور تصویری – نمایش نمونه

اسکریپت آن را از اینجا دریافت کنید.

مانند مثال قبل، کتابخانه جی کوئری و اسکریپت را به صفحه HTML معرفی می کنیم.

حالا دستورات سی اس اس زیر را باید اضافه کنیم:

#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}

سپس در پرونده HTML، کدهای زیر را قرار می دهیم:

<ul>
<li><a class="preview" href="1.jpg"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>
<li><a class="preview" href="2.jpg"><img src="2s.jpg" alt="gallery thumbnail" /></a></li>
<li><a class="preview" href="3.jpg"><img src="3s.jpg" alt="gallery thumbnail" /></a></li>
<li><a class="preview" href="4.jpg"><img src="4s.jpg" alt="gallery thumbnail" /></a></li>
</ul>

همانطور که می بینید، یک لیست از چند تصویر ایجاد کردیم و به لینک شان، کلاس ِ preview دادیم.

پنجره شناور تصویری مان ایجاد شد :) می توانید به لینک های تصاویر، title هم اضافه کنید تا در پنجره شناور، یک توضیح هم نمایش داده شود.

فایل های لازم و مثال های مطرح شده را یکجا و کامل دریافت کنید(۲۵۰ کیلوبایت):