چگونه با استفاده از CSS3 یک Tooltip ساده بسازیم

نوشته شده توسط شطرنجی در ۱۱ آذر ۱۳۹۱

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

امروز میخوایم روش ساخت Tooltip با استفاده از HTML و CSS رو بهتون آموزش بدیم .

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

<a title="This is some information for our tooltip." class="tooltip">CSS3 Tooltip</a>

گام بعدی ایجاد استایل برای کلاس tooltip می باشد :

.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;
}

ما در اینجا از بک کراند سیاه با وضوح ۸۰% استفاده کرده ایم . در مرورگرهایی که از این ویژگی پشتیبانی نمی کنند ، پس زمینه خاکستری تیره دیده می شود . همچنین با استفاده از Border-Radius به باکس توضیحات استایل دادیم که در صورت باز شدن ، گوشه های آن به صورت دور گرد نمایش داده می شود .

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

content: attr(title);

ما یک بار آن را در فایل CSS می آوریم و بار دیگر آن را در فایل HTML فراخوانی می کنیم . پس لینکی را که در بالا قرار دادیم را اصلاح میکنیم :

<a href="#" title="This is some information for our tooltip."><span title="More">CSS3 Tooltip</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 استفاده کنید و توضیحات را در هر جا که خواستید نمایش دهید .

در آخر نتیجه کار رو می بینیم :    نمایش

۶ دیدگاه دسته‌بندی : CSS3, HTML5, آموزش و مقالات, طراحی وب 10,064 بازدید


۶ دیدگاه ارسال شده است.

دیدگاه‌تان را ارسال کنید ...