آموزش ساخت نوشته همراه با باکس توضیحات (Tooltip) بسیار زیبا با CSS

با سلام

در این پست قصد دارم روش ساخت Tooltip را برای شما توضیح بدهم. تمام کد نویسی های این آموزش با css انجام شده و شما هیچ نیازی به استفاده از javascript یا jQuery ندارید.

برای مشاهده دموی این آموزش اینجا کلیک کنید .

ابتدا کدهای زیر را در قسمتی از کدهای Html سایت خودتون که میخواهید به صورت Tooltip  (نوشته ای همراه با باکس توضیحات ) در بیاید قرار دهید

نشانگر موس خود را بر روی لینک زیر قرار دهید. 
<a href="#" title="این آموزش بر روی تمامی مرورگر ها به خوبی کار میکند." class="tooltip">Tooltip</a>

سپس کدهای css زیر را در درون کدهای قالبتون قرار دهید

<style>
.tooltip {
    position: relative;
}
.tooltip:before, .tooltip:after {
    position: absolute;
    transition: All 0.5s ease;
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    margin-left: -100px;
    left: 50%;
    bottom: 300%;
    display: block;
    color: #000;
    opacity: 0;
}
.tooltip:before {
    content: attr(title);
    border: solid 1px #0088cc;
    background: #FFF;
    width: 200px;
    text-align: center;
    z-index: 2;
    font-size: 13px;
    line-height: 18px;
    padding: 5px;
}
.tooltip:after {
    content: '\25c6';
    margin-left: 0;
    margin-top: 10px;
    width: 15px;
    height: 15px;
    z-index: 1;
    line-height: 28px;
    color: #0088cc;
    font-size: 20px;
}
.tooltip:hover:before, .tooltip:hover:after {
    bottom: 150%;
    opacity: 1;
}
</style>

خوب کار تمام شد و Tooltip  مورد نظرتون ایجاد شد.

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

موفق و پیروز باشید.