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

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

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

 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 لینک ها اینطوری نمایش داده میشند.

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

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

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

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

لینک دانلود

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

امتیاز شما برای این مقاله
16 نظرات
  1. علی جوان می گوید

    با سلام
    اگر تصویر مورد نظر تصویر یکی از پست ها باشد چگونه می توانیم وقتی نشانگر موس روی تصویر می رود خلاصه متن پست را نشان دهد.
    با سپاس

    1. دکتر آرش حیدری می گوید

      سلام
      با کدهای بالا میشه همه کاری رو انجام داد و هر متنی رو نمایش داد

  2. هادی می گوید

    ممنون

  3. rahmat می گوید

    با عرض سلام و خسته نباشید خدمت آقا آرش گل آقا آرش بک آپ تمام مطالبتون رو می خوام . می خواستم ببینم بهم می دید یا نه ؟

  4. اکبر قره باغی می گوید

    خیلی ممنون

  5. محمد می گوید

    مطالب بدرد بخوری مینویسی
    دستت درد نکنه
    اگه وقت کردی درباره content: “” هم یه مطلب بنویس

    1. آرش حیدری می گوید

      ممنون
      در اولین فرصت…

  6. alireza می گوید

    مثل همیشه عالی

  7. مهدی می گوید

    سلام آقا آرش خسته نباشید اگه امکان داره ابزار لایک هم با آموزش بزارید بیزحمت دمتون گرم ♥ ♥

    1. آرش حیدری می گوید

      سلام
      مطلبی هستش که خیلی سایت ها گفتند کافیه یکبار گوگل سرچ کنید …
      ما بیشتر مطالبی تو سایت می زاریم که تازگی داشته باشند
      ممنون

  8. thank می گوید

    با سلام خواستم بدونم طربقه تبدیل پسوند php به html در قسمت آدرس مرورگر برای وردپرس البته دیتالایف این رو به صورت پیشفرض داره الان وردپرس افزونه خواصی می خواد یا فقط کد با تشکر

    1. آرش حیدری می گوید

      سلام
      تا جایی که من می دونم اصلا وردپرس تو قسمت پیوند یکتا اصلا مطالب رو با پسوند php نمایش نمیده !

  9. قائم می گوید

    سلام ممنون ، ببخشید باید با چه کدی title روجابجا کنیم؟ مثلا مکان قرارگیریش مثله حالت اولیه و معمولی title باشه؟بعد وقتی این استایل رو میزاریم title قبلی رو چجور میشه برداشت؟

    1. آرش حیدری می گوید

      سلام
      برای این که title پیشفرض برداشته شود ، کده دیگری نیاز هستش که در مطالب بعدی انشاا… آموزش میدیم
      با تشکر

  10. ali می گوید

    سلام و ممنون از این پست خوبت یه افزونه بک آپ گیری رایگان میخوام میشه معرفی کنی ممنون

    1. آرش حیدری می گوید

      سلام
      باید داخل مخزن وردپرس جستجو کنید ، راستش چون خودم استفاده نمی کنم نمی دونم کدوم ها بهتر هستند.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.