نمایش title لینک و عکس – tooltip style

سلام خدمت همه ی دوستان عزیز ، امروز استایلی آماده کردیم برای نمایش title لینک های متنی یا تصاویر و عکس های سایت که لینک به آنها داده شده است.

 tooltip چیست ؟

وقتی ما یه لینکی ایجاد می کنیم یکی از اجزای لینک که حتما باید باشه آدرس (href) هستش و یکی دیگه که عنوان یا title هستش ،برای مثال لینک ها به صورت زیر هستند.

 <a href="http://doctorwp.com" title="وب سایت دکتر وردپرس">
دکتر وردپرس
</a>

وقتی نشانگر موس روی لینک ها به صورت پیشفرض میره یک کادر شبیه تصویر زیر باز میشه که عنوان لینک رو نشون میده.

حالا ما می خوایم ، یک استایل دیگه بهش اضافه کنیم .

استایل نمایش title لینک و عکس ، tooltip

ما در این نوشته یک استایل با کادر مشکی رنگ آماده کردیم . شما باید داخل فایل style.css “کلاس” مورد نظر که دوست دارید عنوان لینک هایی که داخل اون کلاس هستند رو اینطوری نمایش بدید ابتدا پیدا کنید سپس 2تا a:after و a:hover:after به همراه کدهای زیر رو بهشون اضافه کنید.

.demo_page .links a:after {
 content: attr(title);
 position: absolute;
 height: 20px;
 padding: 7px;
 color: #FFF;
 background: rgba( 0, 0, 0, 0.5 );
 white-space: nowrap;
 border-radius: 8px;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 -ms-border-radius: 8px;
 -o-border-radius: 8px;
 opacity: 0;
 transition: 0.2s;
 -moz-transition: 0.2s;
 -webkit-transition: 0.2s;
 -ms-transition: 0.2s;
 -o-transition: 0.2s;
}
.demo_page .links a:hover:after {
 opacity: 1;
}

دقت کنید ، ما اینجا چون یک پیش نمایش هم آماده کردیم در انتهای مطلب ، دوتا کلاس “demo_page” و “links” داشتیم ، شما باید متناسب با قالب خودتون ویرایششون کنید حتما.

تقریبا کار تموم شده ، حالا شما داخل قالب لینک هاتونو مثل همون مثال بالایی قرار بدید.ما اینجا مثلا به یک عکس لینک دادیم ، فرقی نمی کنه.

<a href="http://doctorwp.com" title="وب سایت دکتر وردپرس">
<img src="logo.png" alt="وب سایت دکتر وردپرس" title="وب سایت دکتر وردپرس">
</a>

در نهایت title لینک ها اینطوری نمایش داده میشند.

ساخت آنلاین استایل tooltip

وب سایت www.csstooltip.com ابزار خیلی خوبی برای این کار هستش ، که اگر دوست دارید تولتیپ دلخواه خودتونو اونجا آنلاین بسازید.

پیش نمایش و دانلود کدهای تولتیپ

لینک دانلود

پیش نمایش کدها