Tooltip زیبا با CSS
#1
Note 
[HTML]
<a href="#">Roll over here <span>Pure Css Tooltip</span></a>

<style type="text/css">

/* general */

body {
margin:0;
padding:40px 80px;
background:#fff;
font:70% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1, h2{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
font-size:140%;
}
p{
margin:1em 0;
width:500px;
}
a{
color:#f20;
text-decoration:none;
}
a:hover{
color:#999;
}

/* // here comes the goodnes */

a{
z-index:10;
}
a:hover{
position:relative;
z-index:100;
}
a span{
display:none;
}
a:hover span{
display:block;
position:absolute;
float:left;
white-space:nowrap;
top:-2.2em;
left:.5em;
background:#fffcd1;
border:1px solid #444;
color:#444;
padding:1px 5px;
z-index:10;
}

/* // goodnes */

/* // general */

</style>
[/HTML]

پاسخ
#2
Note 
سلام
روش خیلی خوبیه اما همه جا کاربردی نیست مثلا اگر title گذاشته باشیم دو تا tooltip میاد

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  سوال مشکل نمایش در منو زیر مجموعه سطح چهارم blackwizard 0 120 30-06-2016 ساعت 19:27
آخرین ارسال: blackwizard
Note 7 افکت بسیار زیبای CSS THE KNIGHT 2 784 26-09-2014 ساعت 16:09
آخرین ارسال: saber2
Note افکت زیبا برای ساخت دکمه در css WWWorker 0 345 20-09-2014 ساعت 21:12
آخرین ارسال: WWWorker
Note دانلود لودینگ های بسیار زیبا (CSS) WWWorker 3 723 23-08-2014 ساعت 19:08
آخرین ارسال: a.z.n
Note دکمه دانلود زیبا با CSS3 Daniel 2 609 14-03-2014 ساعت 23:40
آخرین ارسال: PHP.sec
Note CSS: کلید زیبای روشن و خاموش SOFTAFZAR 3 654 05-08-2013 ساعت 13:52
آخرین ارسال: SOFTAFZAR
Note افکت های زیبای CSS SOFTAFZAR 0 693 11-01-2013 ساعت 19:11
آخرین ارسال: SOFTAFZAR

کاربرانِ درحال بازدید از این موضوع:   1 مهمان