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

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

 tooltip چیست ؟

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

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

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

عنوان لینک به صورت پیش فرض

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

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

ما در این نوشته یک استایل با کادر مشکی رنگ آماده کردیم . شما باید داخل فایل style.css “کلاس” مورد نظر که دوست دارید عنوان لینک هایی که داخل اون کلاس هستند رو اینطوری نمایش بدید ابتدا پیدا کنید سپس ۲تا 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 لینک ها اینطوری نمایش داده میشند.

نمایش title لینک ها - tooltip

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

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

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

لینک دانلود

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

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 1 رای
Loading...