پلاگین TOOLTIPدربوت استرپ

پلاگین TOOLTIP در بوت استرپ :

TOOLTIP چیست ؟

• tooltip باکس کوچکی است که زمان بردن موس روی یک عنصر توسط کاربر ظاهر می شود.
• این جعبه در مورد عنصر توضیحاتی را به کاربر ارائه می دهد.
• در بوت استرپ این امکان به صورت پیش فرض توسط پلاگین tooltip تعریف شده است.

  چگونه می توان پلاگین TOOLTIP را در بوت استرپ ایجاد کرد؟

• پلاگین tooltip را به بوت استرپ اضافه کنید.در جلسات قبل در مورد این موضوع توضیح داده شده است.
• “data-toggle=”tooltip : ازاین ویژگی برای ایجاد تولتیپ در بوت استرپ استفاده کنید.
• ازویژگی title برای مشخص کردن متنی که باید درون تولتیپ نوشته شود استفاده کنید.

به کدهای زیر دقت کنید.

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

مثال برای tooltip :

هنگامی که کاربر موس را روی عبارت می برد عبارتHooray! به صورت tooltip برای آن ظاهر می شود.

نکته : برای پلاگین tooltip می توانید جاوا اسکریپت را فعال کنید.برای این کار کافی است که کدهای زیر را به پروژه اضافه کنید.

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(); 
});
</script>

به تفاوت نمایش متن داخل tooltip در دو مثال دقت کنید.

مکان ظاهر شدن TOOLTIP نسبت به عنصر:

• پلاگین tooltip به صورت پیش فرض دربالای عنصر نمایش داده می شود .
• در بوت استرپ این امکان وجود دارد که مکان نمایش tooltip تغییر داده شود.

<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>
</ul>
</div>

<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(); 
});
</script>

• برای قرار دادن موقعیت نمایش tooltip در سمت بالا , پایین , چپ , راست دربوت استرپ از data – placement استفاده کنید.
• مقداراین ویژگی موقعیت ظاهر شدن tooltip رامشخص می کند. در تصویر زیر یکی از این جهات نمایش داده شده است.

نکته :ویژگی data – placement را می توان با مقدار auto مقداردهی کردکه به مرورگر اجازه می دهد که موقعیت tooltip را به صورت اتوماتیک مشخص کند.به عنوان مثال اگر مقدار وارد شده به صورت “auto – left” باشد مرورگر tooltip رادر سمت چپ نمایش می دهد.در غیر این صورت(فضا وجود نداشته باشد) در سمت راست نمایش داده می شود.

منبع : همراه آی سی تی