PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : [آموزش] قرار دادن عنوان در تولتیپ با CSS3



Mohsen Neo
2012/08/19, 01:18 AM
درود :k:

اول عکس رو ببینید :دی :

http://up.vbiran.ir/images/1dc2aps5zzsz2gwk15jc.png

کد تولتیپ :

.tooltip {
display: inline;
position: relative;
}

.tooltip:hover {
color: #c00;
text-decoration: none;
}

.tooltip:hover:after {
background: #111;
background: rgba(0,0,0,.8);
border-radius: .5em;
bottom: 1.35em;
color: #fff;
content: attr(title);
display: block;
left: 1em;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
z-index: 98;
}

.tooltip:hover:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0,0,0,.8) transparent;
border-width: .4em .4em 0 .4em;
bottom: 1em;
content: "";
display: block;
left: 2em;
position: absolute;
z-index: 99;
}
در کد بالا میبینید که title رو گذاشتیم در content تولتیپ که باعث میشه عنوان در تولتیپ به نمایش در بیاد .

و برای قرار دادن تولتیپ باید title اضافه کنیم و در کلس tooltip قرار میدیم:


<a href="http://vbiran.ir/" class="tooltip" title="نخستین مرجع 'رایگان' ویبولتین در ایران">وی بی ایران</a>

دمو : Tooltip in CSS3 - mohseneo.persiangig.com (http://mohseneo.persiangig.com/other/tooltip_css3.html)

موفق باشید . :x

Mr.Ramin
2012/08/19, 02:13 PM
تائید شد .