استايل بندي براي Tooltip ها

سلام به همگي.شرمنده خيلي وقته پست ندادم و البته علتش درگيري بيش از حد هستش.امروز هم با يه پست تقريبا متفاوت در خدمتتون هستم.

tooltips در واقعا يه نوع توضيح دهنده براي عناصر خاص در وب سايتهاتون هست.حالا اين توضيح دهنده مي تونه مثل مثال ما حالت ابتدايي و ساده داشته باشه و يا اينكه با تركيب چند اسكريپ و افكت حالتي بسيار زيبا به خودش بگيره!

يه صفحه HTML ساده و سفيد بسازيد و اين كد رو در قسمت BODY قرار بديد:
<a href="#" class="tooltip"><span>This is a pure CSS tooltip!</span>Tooltip 1</a>

اين كد مربوط به قسمتي بود كه ما ميخوايم اون حالت رو ايجاد كنيم.يعني در خود صفحه.بعدش فايل استايل .CSS رو باز مي كنيم و اين كدها رو بهش اضافه مي كنيم و البته مي تونيم در قسمت HEAD بين تگهاي <stayle> قرار بديمش.

.tooltip { position:relative; z-index:24; }
.tooltip span { display:none;}
.tooltip:hover {z-index:25;}
.tooltip:hover span {
display:block;
position:absolute;
width:120px;
top:25px;
left:20px;
background-color:#FCFBDC;
border:1px solid #333333;
padding:5px;
font-size:11px;
color:#333333;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
}


مثالي كه در مطلب زده شده بسيار ابتدايي و ساه هست.و البته فارسي نشده! براي فارسي كردنش كافيه استايل اون رو راست به چپ و فونتش رو هم tahoma بذاريد.براي كامل شدن اين بحث فايل زير رو بگيريد و محتويات Tooltip اولي رو با دومي نگاه كنيد:

دانلود فايل نمونه – 8 كيلو بايت!

اگر مقدار كمي هم در بحث استايل اطلاعات داشته باشيد مي تونيد كارهاي جالبي با اين tooltip انجام بديد.منبع اوليه اين مطلب هم اين هست.