:: خوب شاید قبل از همه چی بهتر باشه واسه اونایی که نمی دونن تولتیپ چیه یه توضیح کوتاهی بدم. تولتیپ (tooltip) یه ابزاری هست برای زیباسازی وبسایت یا وبلاگ های شما . حالا دقیقا چیکار می کنه این تولتیپ؟ یکی از گزینه های تنظیمات هر لینک یا تگ در صفحات وب بخش توضیحات یا title اون تگ هست یعنی اگر تو صفحتون یه کدی مثل کد زیر داشته باشید
<a href="http://7learn.com" title="معراجیان">Sina</a>
وقتی روی لینکتون نشانگر ماوس رو نگه دارید یه چیزی مثل شکل ۱ به شما نمایش داده می شه . حالا بعد از آموزش زیر می تونید توضیحات لینک خودتون رو به حالت ۲ که در عکس زیر نشون داده شده در بیارید .
:: توی اینترنت تولتیپ های زیادی وجود داره که تقریبا توی همه ی اونا یه کدی رو به استایل خودتون اضافه می کنید و برای هر لینکی یه کلاس تعریف می کنید(اگر متوجه نمیشید نگران نباشید در ادامه متوجه میشید) اما در این آموزش تنها چندتا فایل به قالبتون اضافه می کنید اونا رو فراخونی می کنید و علاوه بر اینکه نیازی به تعریف کلاس در هر لینک نیس امکان تعیین رنگ آن در هر لینک نیز وجود دارد چیزی که در تولتیپ های دیگر نمی بینیم!!!
حالا چطوری این تولتیپ رو اضافه کنیم؟
ابتدا فایل زیر را دانلود کنید و در صفحه اصلی سایت خود یا اصطلاحا روت خود آپلود کنید بعد از خارج کردن فایل از حالت فشرده باید یک فولدر به اسم colortip-1.0 داشته باشید که توش دوتا فایل هست و یه فایل به اسم script.js .
خوب حالا فقط یه مرحله از کار باقی مونده!!!
بالای قالب یا صفحه وب خود درون تگ head این چند خط رو اضافه کنید تا فایل های مربوط به تولتیپ رو لود کنید . فقط دقت کنید که در خط ۲ ، ۳ و ۴ باید آدرس دقیق جایی که فایل ها رو آپلود کردید بزارید .
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="colortip-1.0/colortip-1.0-jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="colortip-1.0/colortip-1.0-jquery.css"/>
خوب حالا اگر هر تگی با ویژگی title مثل پاراگراف زیر داشته باشید توضیحات لینکوتون به حالت رنگی و جالبتر درمیاد !
<p title="Web Design & Javascript Tutorials">7Learn.com</p>
به همین سادگی!
www.7learn.com/tutorials/tooltip-with-custom-colors
