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

پیش نیاز: قبل از هرچیز به کتابخانه ی جی کوئری احتیاج داریم. از اینجا دریافت کنید. (اگر داخل ایران هستید، قادر به دریافت نخواهید بود که در این صورت می توانید از اینجا دریافت کنید).
1- ایجاد پنجره شناور متنی – نمایش نمونه
برای ایجاد پنجره های شناور متنی، از روش زیر استفاده می کنیم:
ابتدا این اسکریپت را دریافت کنید.
سپس در پرونده 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 ِ آن می نویسید را در پنجره شناور نمایش می دهد.
2- ایجاد پنجره شناور تصویری – نمایش نمونه
اسکریپت آن را از اینجا دریافت کنید.
مانند مثال قبل، کتابخانه جی کوئری و اسکریپت را به صفحه 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 هم اضافه کنید تا در پنجره شناور، یک توضیح هم نمایش داده شود.
فایل های لازم و مثال های مطرح شده را یکجا و کامل دریافت کنید(250 کیلوبایت):











babak
در 09/06/04 گفت:درقسمت اول ” tooltip” ، دو کدی که برای معرفی به HTml معرفی کردهاید ، آیا باید به جای src=”url jquery.js” لینک آپلود شده رو قرار داد یا نه؟
پاسخ
علیرضا
در 09/06/04 گفت:بله دقیقا…
پاسخ
مهدی رادی
در 09/06/07 گفت:ایول بهت ، خیلی با حال بود …
بازم از این کارا بکن..
پاسخ
علیرضا
در 09/06/07 گفت:قابلی نداشت چشم حتما :)
پاسخ
گرافيست، شوخ، تلخ
در 09/06/23 گفت:جالب بود عليرضا جان، خوش و سلامت باشي…
چه ojoobe ئيست اين جي كوئري ( شرمنده فارسي ش رو بلد نبودم ) :|
استفاه برديم ا محضرتون استاد ;)
پاسخ
SHahab
در 09/06/25 گفت:با سلام
من از اين جي كوري براي سايتم استفاده كردم ( رو لوكال هست )
وقتي كد
src=”jquery.js” type=”text/jav
را قرار ميدهم اديتور خود سايت باز نيمشه بايد چيكار كنم ؟
پاسخ
علیرضا
در 09/06/26 گفت:قربان شما :)
پاسخ
علیرضا
در 09/06/26 گفت:ادیتور سایت باز نمیشه؟ یعنی چی؟
پاسخ
SHahab
در 09/07/05 گفت:به عكس زير يك نگاهي بكنيد
http://www.uploadgeek.com/thumb-81BB_4A5091B7.jpg
پاسخ
SHahab
در 09/07/05 گفت:http://myup.ir/images/vi2cvqoc2r6niaaqibik.gif
پاسخ
SHahab
در 09/07/14 گفت:سلام آقا علي رضا مشگل اول من حل شد
حالا يك سوال ديگه تو تمام اين حالت ها بايد براي لينك ها class در نظر گرفته بشه امكلن نداره بدون داشتن class اين كار رو انجام داد ؟
مثلا هرجا alt يا title هست خودش به صورت tooltip در بياره ؟
مرسي
پاسخ
علیرضا
در 09/07/17 گفت:@ SHahab
سلام
چرا فکر می کنم اگر به تگ نگه دارنده لینک ها، کلاس ِ tooltip بدید روی لینک ها تاثیر بذاره…
حالا اگر کار نکرد می توانید از این استفاده کنید که خودم هم بارها استفاده کردم به همین صورتی که شما مدنظر دارین ;)
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
پاسخ
توحید
در 09/07/29 گفت:سلام آقا راستی این جی کوری ها رو چگونه میتوان تو وردپرس جای داد؟؟؟؟؟
پاسخ
Silence
در 09/11/10 گفت:یه سوال…
tooltip رو توی فایل CSS به صورت id تعریف می کنیم…اما وقتی می خوایم استفاده کنیم…برای لینک ها اون رو به صورت class میاریم…چرا؟…
توی اون فایل جاوا اسکریپت id تبدیل به class می شه؟…
پاسخ
Silence
در 09/11/10 گفت:به عبارت بهتر می شه تشریح کنی که اسکریپت js چی کار می کنه اینجا؟…(پروسه ای که js باعث اون می شه برام سوال شده…که چرا وقت تو لینک ها به جایclass از id استفاده می شه(tooltip…) لینک حذف می شه(که البته به خاطر display هست که توی id که توی css تعریف شده و none هست این اتفاق می افته…)…اما وقتی از class استفاده می شه این اتفاق نمی افته…در صورتی که ما کلاسی به این نام نداریم…و از اون طرف هم تمام تغییرات #tooltip به class اختصاص داده می شهو روی لینک اجرا می شه…)…
پاسخ
مسیح
در 09/12/18 گفت:خیلی ممنون از آموزش خوبتون فقط یه سوال :
من یکی از لینک هام خودش یه class براش تعریف شده حالا چیکار کنم که بتونیم class تولتیپ را هم بهش بدم ؟
ممنون
پاسخ
علیرضا
در 09/12/18 گفت:@مسیح
خواهش میکنم. برای اینکه بتونین به یه لینک بیشتر از یه کلاس بدین، کافیه اسم کلاسها رو کنار هم و با یک فاصله قرار بدین. اینطوری:
پاسخ
مهدی نعیمی
در 10/01/01 گفت:سلام
برای اینکه بخواهیم از این خاصیت برای تگ area هم استفاده کنیم تا لینکهایی که توسط image map ایجاد کردیم باید چیکار کنیم ؟
استفاده از کلاس tooltip به تنهایی جوابگو نبود
پاسخ
علیرضا
در 10/01/01 گفت:@مهدی نعیمی
فکر کنم اگر از این اسکریپت استفاده کنین جواب میگیرین – http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
پاسخ
محمد
در 10/02/15 گفت:سلام و دستت درد نکند. ولی دوست گرامی راستش من که تازه کار هستم و زیاد وارد از کارتان سردرگم شدم و نمیتوانم از آن استفاده کنم. آیا میتوانید سادهتر آن را شرح دهید؟
با تشکر
پاسخ
شهاب
در 10/05/22 گفت:سلام عليها جان
چطوري ميتونم مكان نمايش پنجره شناور رو تغيير بدم.
منوهاي وبلاگ من سمت راست صفحه هستن. ميخوام tooltip سمت چپ موس باشه.
و اينكه الان من اينو درست كردم ولي تقريباً 2 سانت با موس فاصله داره. چطوري به موس نزديكش كنم؟
مرسي
پاسخ
مهدی نعیمی
در 10/06/03 گفت:@عÙ�Û�رضا – سلام آقا :)
چه جوری میشه به کد این اسکریپت کدی اضافه کرد که تولتیپ ها فید این بشن ؟
آیا کد آماده ای برای اینکار وجود داره ؟
پاسخ
نادر
در 10/06/18 گفت:سلام
سایت خوبی داری دوست عزیز
و پر محتوی
اما یه سوال دارم . ببینم میشه کلاس رو با # تعریف کرد؟ کد CSS که گفتید با # کلاس تعریف کردید که به نظرم باید از ” . ” استفاده کنید
اگر من اشتباه میکنم به من اطلاع بدید
ممنون و موفق باشید ….
پاسخ
علیها
در 10/06/18 گفت:@نادر
نه، کلاس رو با . و آیدی رو با # تعریف میکنیم.
اون #preview برای عکسی که در حال حاظر داره در پنجرهی شناور نشون داده میشه هست و ارتباطی با کلاس preview که به لینکها دادیم نداره.
پاسخ
رضا
در 10/06/19 گفت:سلام
من خیلی وقته از این کدی که شما معرفی کردی استفاده میکنم اما حالا روی یه سایت دیگه که خواستم اجراش کنم کار نمیکرد. تا اینکه جی کوئری از ورژن 1.3.2 به ورژن 1.3.1 تغییر دادم و عمل کرد.
حالا میبینم اکثر کد هایی جی کوئری که دارم فقط با ورژن 1.3.1 کار میکنن.
آیا میشه کاری کرد که با ورژن جدید هم کار کنن یا باید کماکان از ورژن قبلی استفاده کنیم؟
پاسخ
نـز ا ر
در 10/08/04 گفت:واقعا عالی بود تا حالا من از پلاگین و ماژول توی CMS ها استفاده می کردم
ولی با این آموزشی که گذاشتید خیلی کارم را افتاد
فقط یک سوال:
آیا میشه به جای اون عکس یه فایل ویدئویی FLV قرار داد که موقع موس اور کردن پخش کنه؟
پاسخ
کریم محمدی
در 10/08/05 گفت:سلام . من از کد اول توی قالب وبلاگم در میهن بلاگ استفاده کردم ، اما وقتی موس رو روی لینک میبرم ، فقط عنوان لینک در ته (پایین) صفحه نمایش داده میشه .
به نظرم همه چی رو درست انجام دادمولی نمیدونم مشکل کجاست .
لطفا کمک کنید
پاسخ
احمدرضا
در 10/08/31 گفت:سلام
خوبید ببخشید میشه جواب سوال من رو بدهید لطفا؟
من دستور سی اس اسی میخوام که بشه با اون دستور کد های اچ تی ام ال رو غیر فعال کرد.
منتظر جوابتون هستم.
اگه یه اینچنین کدی رو به من بدهید طرحم رو بهتون میگم.
کمکم کنید!راه دوری نمیره!
پاسخ