تولتیپ فول CSS

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

توی این مقاله می خواهیم این تولتیپ که فقط با استفاده از html و css کد شده است را آموزش دهیم.

ابتدا یک تگ <a> درست می کنیم و بعد متنی که میخواهیم هنگام هاور شدن موس نمایش داده شود در یک تگ <span> قرار می دهیم مثل کدی که در پایین مشاهده می کنید.

<a class="tooltip" href="#">خانه وب ایران<span>بهترین</span></a>

اصل کار از اینجا به بعد است که باید با استفاده از خاصیت های css این امکان را فراهم کنیم.

a.tooltip {
    position: relative;
    color: #000;
    text-decoration: none;
}

a.tooltip:before {
    content: "◊ ";
    color: #FD0700;
}

a.tooltip span {
    padding: 5px 10px;
    background: #FD0700;
    border: 1px solid #FD0700;
    border-radius: 3px;
    min-width: 70px;
    position: absolute;
    top: 25px;
    left: 5px;
    color: #fff;
    box-shadow: 0px 1px 0px #fff;
    text-align: center;
    opacity: 0;
    -moz-transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    transition: opacity 1s ease;
}

a.tooltip span:before {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #FD0700;
    z-index: 5;
    content: " ";
    position: absolute;
    top: -5px;
    left: 48%;
}

a.tooltip span:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #FD0700;
    display: block;
    content: " ";
    position: absolute;
    top: -6px;
    left: 48%;
}

a.tooltip:hover span {
    opacity: 1;
}

آموزش تغییرات در کد:

شما می توانید از این تولتیپ هنگام هاور شدن عکس و یا دیگر تگ های html استفاده کنید کافیی است بجای “خانه وب ایران” تگ های مورد نظر را بنویسید.

خط 3: رنگ متن اصلی می توانید عوض کنید.

خط 7: یک علامت قبل از متن اصلی است “◊” که می توانید حذف و یا تغییر دهید و رنگ آن هم در خط 8 قابل تغییر است.

خط 12: برای تغییر پس زمینه تولتیپ است.

خط 19: برای تغییر رنگ متن تولتیپ می باشد..

ممنون از توجه تون – سوالات خودتونو در بخش نظرات مطرح کنید.