ساخت tooltip با استفاده از زبان CSS

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

امروز و در اینمقالهاز سلسله مقاله هایطراحی وب سایتوسئووبهینه سازی سایتکه برای شما بازدید کنندگان عزیروبسایتشرکت اطلس وب تهیه شده است,قصد داریم آموزش ساختن یکtooltipساده توسط زبان هایHTMLوCSSرا بدهیم.

برای شروع کار شما به کدهایHTMLزیر احتیاج دارید.

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

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

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

content: attr(title);

<a href="#" title="This is some information for our tooltip."><span title="More">CSS3 Tooltipspan>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;
}