سلام برنامه | HiProgram

سلام برنامه با آموزش تصویری ساخت (tooltip) به زبان فارسی در خدمت شماست

در این آموزش شما می آموزید که چطور برای خود تولتیپ طراحی کنید .

برای دوستانی که نمیدانند تولتیپ چیست

تولتیپ چیست؟

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

از تولتیپ با عنوان باکس توضیحات نیز یاد می شود که برای توضیحات بیشتر یک نوشته یا یک لینک از آن استفاده می شود

آموزش تصویری ساخت (tooltip) به شما امکان استفاده از تولتیپ در هر مورد را می دهد

آموزش تصویری ساخت تولتیپ به شما امکان سفارشی سازی با دست باز را میدهد

برای ساخت تولتیپ شما باید کد های زیر را در body خود قرار دهید:

<div class="tooltip">نوشته شما
  <span class="tooltiptext">تولتیپ شما</span>
</div>

همانطور که در کد های بالا میبینید در قسمت نوشته شما باید متن خود را وارد کنید.

در قسمت تولتیپ شما باید متن باکس تولتیپ مورد نظر خود را وارد کنید.

برای نمایش کد های بالا به صورت صحیح باید کد های زیر را به css قالب خود اضافه کنید

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

کار ساخت تولتیپ تمام است.

شما می توانید برای مشاهده جزئیات بیشتر آموزش تصویری فارسی را همراه سورس کد از باکس دانلود موجود در زیر همین پست دانلود نمایید.