آموزش کار با پلاگین tooltip در بوت استرپ

بازدید: 590 بازدید
pop up
[cdb_box_content css=”.vc_custom_1572781741196{background-color: #1e73be !important;}”]

عنصر tooltip یک پاپ آپ کوچک است که با حرکت کاربر نشانگر ماوس را روی یک عنصر نشان میدهد.

در این مبحث به آموزش کلاس های پلاگین tooltip در بوت استرپ ۴ خواهیم پرداخت.

و انواع کلاس های آماده ی پلاگین tooltip ها (پاپ آپ) در بوت استرپ ۴ را مثال میزنیم.

[/cdb_box_content]

با عرض سلام و وقت بخیر خدمت شما همراهان گرامی سایت پرنیان طرح

در این مطلب به آموزش tooltip ها (پاپ آپ ها ی کوچک) در بوت استرپ ۴ میپردازیم.

tooltip ها (پاپ آپ) باکس های کوچکی هستند که درونشان فقط میتوان محتوای متنی قرار داد.

tooltip ها زمانی نمایش داده میشوند که روی بخش یا قسمت مورد نظر موس خود را hover کنید.

از این خصیصه برای نشان دادن متن های کوچک درون باکس استفاده میشود در بوت استرپ کلاس های استفاده از tooltip ها توضیح داده شده است.

اگر بخواهید علاوه برمتن از عکس ها یا شکل های ظاهری دیگری هم استفاده کنید باید از خصیصه ی Popover استفاده نمایید.

چگونه یک tooltip ایجاد کنیم ؟

برای ایجاد یک tooltip (پاپ آپ) ویژگی data-toggle=”tooltip” را به یک عنصر اضافه کنید.

از ویژگی title برای مشخص کردن متنی که باید در جعبه ابزار به کار برود استفاده کنید.

نکته :

Tooltips باید با jQuery آغاز شوند ، عنصر مشخص شده را انتخاب کرده و از متد ()tooltip استفاده کنید.

کدهای مثال زیر تمام tooltips در سند را فعال میکنند.

مثال :

[php]

<div class=”container”>
<h3>Tooltip Example</h3>
<a href=”#” data-toggle=”tooltip” title=”Hooray!”>Hover over me</a>
</div>

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

[/php]

خروجی مثال بالا :

pop up
tooltip example

Positioning Tooltips :

به طور پیش فرض ابزار tooltip در بالای عنصر ظاهر میشود.

برای تنطیم موقعیت tooltip در بالا ، پایین ، سمت چپ یا راست عنصر از ویژگی data-placement استفاده کنید.

مثال :

[php]

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

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

[/php]

خروجی این مثال :

محل قرارگیری tooltip
placement
دسته بندی آموزش bootstrap
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.