منظور از تولتیب ها, همان کادر های ساده و رنگ روشنی هستند که با قرار دادن موس بر روی آنها , پس از 1 ثانیه ظاهر میشوند و شرح مختصری از اون Object رو به ما میده .
این تولتیب ها با دادن اتربیوت title به یک تگ در html ساخته می شوند .
همانطور که میدانیم به صورت پیش فرض تولتیب ها دارای استایلی ساده می باشند .
با استفاده از این آموزش میتوانید این استایل را تغییر و از یکنواختی در بیاورید .
آموزش :
ابتدا باید فایل های مورد نیاز را از اینجا دانلود کنید و سپس در روت ( root ) سایت خود قرار دهید . ( منظور از روت , پوشه ی اصلی سایت شماست . مثلا در هاست های لینوکسی , در پوشه ی public_html و یا www )
نکته : کاملا بدیهی است که این آموزش , طریقه نصب پلاگین در روت سایت میباشد و اگر بخواهید جای فایل ها و پوشه هارو عوض کنید , باید آدرس دهی کدهایی که در ادامه آموزش خواهم داد رو هم به صورت مناسب عوض کنید .
حال در بالای صفحه و یا صفحات خود , کد زیر را در بین دو تگ <head> و <head/> قرار دهید .
2
3
4
5
6
7
8
|
<link rel=”stylesheet” type=”text/css” href=”css/tooltipster.css”>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.tooltipster.js”></script>
|
پس از این کار , کدهای زیر را در 2 خط مانده به آخر , یعنی قبل از دو تگ <html/> و <body/> قرار دهید .
2
3
4
5
6
7
8
9
10
|
<script type=”text/javascript”>
$(document).ready(function() {
$(‘*’).tooltipster();
});
</script>
|
نکته : برای دادن این خاصت به هر تگی که دوست دارید , کافیست اتربیوت title را به آن تگ اضافه کنید . البته به دلیل از بین بردن شلوغی در وب سایت , بهتر است فقط به تگ های لینک و عکس این خاصیت را بدهید .
2
3
4
5
6
7
|
<a href=”http://اسکریپت.com” title=”اسکریپت دات کام<“ترفند و آموزش</a>
<img src=”test.jpg” title=”اسکریپت دات کام”>
|