رفتن به مطلب

ساخت تولتیپ با css3


matori73

پست های پیشنهاد شده

درود !

 

استفاده از تولتیب به منظور نمایش اطلاعات اضافی و توضیحات بیشتر پیرامون متن ، لینک و تصاویر می باشد که به سادگی جهت بهبود بخشیدن و ارائه مطالب مفید کاربری دارد بدون اینکه مزاحمتی بر روی طراحی سایت ایجاد کند !

 

... و اما آموزش ؛

 

 

ابتدا یک لینک ایجاد کنید و به آن کلاس tooltip بدید :

 

 

 

 

 

<a title="تولتیپ مورد نظر شما" class="tooltip">متن مورد نظر شما</a>

 

 

خوب، مرحله بعدی هم تعریف استایل برای تولیتپ هست :

 

 


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

 

 

 

ساختار خطی ساده لینک را ایجاد کردیم، الآن باید باکس توضیحات که در هنگام رفتن روی لینک در بالای لینک نمایش داده می شود، بسازیم :

 

 

 

 

 

 

.tooltip:hover:after{   background: #333;   background: rgba(0,0,0,.8);   border-radius: 5px;   bottom: 26px;   color: #fff;   content: attr(title);   left: 20%;   padding: 5px 15px;   position: absolute;   z-index: 98;   width: 220px;}[right][/right]

 

 

 

 

 

 

استفاده از عبارت زیر در استایل جهت نمایش توضیحات اضافی می باشد :

 

content: attr(title);

 

 

 

تا به اینجای کار، تقریبا تعریف و آماده سازی تولیپت هم تمام شده !

ما یک بار آن را در فایل CSS می آوریم و بار دیگر آن را در فایل HTML فراخوانی می کنیم پس لینکی را که در بالا قرار دادیم باید اصلاح بشه، مگه نه ;)

 

 

<a href="https://go.20script.ir/index.php?url=لینک مورد نظر شما" title="تولتیپ مورد نظر شما"><span title="More">متن مورد نظر شما</span></a>

 

 

 

 

در نهایت برای نمایش بهتر و شاخص تر شدن لینک به باکس توضیحات ، استایل خاصی هم به لینک می دهیم تا مشخص تر به نظر برسد .

در اینجا یک فلش رو به پایین را در زیر باکس ایجاد می کنیم تا کار جلوه بهتری داشته باشد !

 

# تاکید میکنم که این امر اختیاری هست !

 

 

.tooltip:hover:before{   border: solid;   border-color: #333 transparent;   border-width: 6px 6px 0 6px;   bottom: 20px;   content: "";   left: 50%;   position: absolute;   z-index: 99;}

 

 

 

در آخر یک نکته رو هم متذکر بشم ؛

 

# برای قرار دادن تولتیپ عکس هم می توانید از Alt استفاده کنید و توضیحات را در هر جا که خواستید نمایش دهید .

 

 

 

موفق باشید

 

 

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...