زبان CSS برای tooltip

طراحی سایت در اصفهان

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

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

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

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

در ادامه کار شما میتوانید 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 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;
}

طراحی سایت در اصفهان

طراحی سایت ارزان در اصفهان
طراحی سایت ارزان
طراحی سایت در اصفهان
طراحی سایت پوشش
اصفهان سایت

زبان CSS برای tooltip