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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پلاگین tooltip در بوت استرپ خواهیم پرداخت.

نکات ابزار زمانی مفید هستند که لازم است پیوندی را توصیف کنید. این پلاگین از پلاگین jQuery.tipsy نوشته شده توسط Jason Frame الهام گرفته شده است. نکات راهنما از آن زمان به روز شده اند تا بدون تصویر کار کنند ، با انیمیشن CSS و ویژگی های داده برای ذخیره سازی عنوان محلی متحرک شوند.

اگر می خواهید این قابلیت پلاگین را به صورت جداگانه در آن قرار دهید، به tooltip.js نیاز خواهید داشت. در غیر این صورت ، همانطور که در درس بررسی اجمالی پلاگین های بوت استرپ ذکر شده است ، می توانید bootstrap.js یا minst bootstrap.min.js را در آن قرار دهید.

کاربردهای پلاگین tooltip ابزار در بوت استرپ

پلاگین tooltip در صورت تقاضا محتوا و نشانه گذاری ایجاد می کند و به طور پیش فرض راهنمای ابزار را بعد از عنصر ماشه قرار می دهد. به دو روش زیر می توانید نکات ابزار را اضافه کنید –

از طریق ویژگی های داده – برای افزودن یک راهنمای ابزار ، “data-toggle = “tooltipرا به تگ anchor اضافه کنید. عنوان لنگر متن یک راهنما خواهد بود. به طور پیش فرض، راهنمای ابزار توسط افزونه روی بالا تنظیم می شود.

&lt;a href = "#" data-toggle = "tooltip" title = "Example tooltip"&gt;Hover over me&lt;/a&gt;

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

از طریق JavaScript – راهنمای راهنما را از طریق JavaScript فعال کنید –

$('#identifier').tooltip(options)

1	$('#identifier').tooltip(options)

افزونه Tooltip پلاگین های فقط css نیست مانند کشویی یا پلاگین های دیگر که در درس های قبلی بحث شده است. برای استفاده از این افزونه باید آن را با استفاده از jquery فعال کنید (javascript را بخوانید). برای فعال کردن همه نکات موجود در صفحه خود فقط از این اسکریپت استفاده کنید –

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

1	$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

مثال

مثال زیر استفاده از افزونه tooltip از طریق ویژگی های داده را نشان می دهد.

&lt;h4&gt;Tooltip examples for anchors&lt;/h4&gt;

This is a &lt;a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   title = "Tooltip on left"&gt; Default Tooltip&lt;/a&gt;.

This is a &lt;a href = "#" class = "tooltip-test" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left"&gt;Tooltip on Left&lt;/a&gt;.

This is a &lt;a href = "#" data-toggle = "tooltip" data-placement = "top" 
   title = "Tooltip on top"&gt;Tooltip on Top&lt;/a&gt;.

This is a &lt;a href = "#" data-toggle = "tooltip" data-placement = "bottom"
   title = "Tooltip on bottom"&gt;Tooltip on Bottom&lt;/a&gt;.

This is a &lt;a href = "#" data-toggle = "tooltip" data-placement = "right" 
   title = "Tooltip on right"&gt;Tooltip on Right&lt;/a&gt;
    
&lt;br&gt;

&lt;h4&gt;Tooltip examples for buttons&lt;/h4&gt;

&lt;button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left"&gt;
   Default Tooltip
&lt;/button&gt;

&lt;button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "left" title = "Tooltip on left"&gt;
    
   Tooltip on left
&lt;/button&gt;

&lt;button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "top" title = "Tooltip on top"&gt;
   
   Tooltip on top
&lt;/button&gt;

&lt;button type = "button" class = "btn btn-default" data-toggle = "tooltip" 
   data-placement = "bottom" title = "Tooltip on bottom"&gt;
   
   Tooltip on bottom
&lt;/button&gt;

&lt;button type = " button" class = " btn btn-default" data-toggle = "tooltip" 
   data-placement = "right" title = "Tooltip on right"&gt;
   
   Tooltip on right
&lt;/button&gt;

&lt;script&gt;
   $(function () { $("[data-toggle = 'tooltip']").tooltip(); });
&lt;/script&gt;

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"

title = "Tooltip on left"> Default Tooltip</a>.

This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"

data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "top"

title = "Tooltip on top">Tooltip on Top</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"

title = "Tooltip on bottom">Tooltip on Bottom</a>.

This is a <a href = "#" data-toggle = "tooltip" data-placement = "right"

title = "Tooltip on right">Tooltip on Right</a>

<br>

<h4>Tooltip examples for buttons</h4>

Default Tooltip

</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip"

data-placement = "left" title = "Tooltip on left">

Tooltip on left

</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip"

data-placement = "top" title = "Tooltip on top">

Tooltip on top

</button>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip"

data-placement = "bottom" title = "Tooltip on bottom">

Tooltip on bottom

</button>

<button type = " button" class = " btn btn-default" data-toggle = "tooltip"

data-placement = "right" title = "Tooltip on right">

Tooltip on right

</button>

$(function () { $("[data-toggle = 'tooltip']").tooltip(); });

</script>

گزینه ها

گزینه های خاصی وجود دارد که می تواند از طریق Bootstrap Data API اضافه شود یا از طریق JavaScript فراخوانی شود. جدول زیر گزینه ها را لیست می کند –

نام

گزینه

مقدار پیش فرض

نام ویژگی داده

توضیح

animation

boolean Default: true

data-animation

انتقال محو CSS را به راهنمای ابزار اعمال می کند.

html

boolean Default: false

data-html

HTML را در راهنمای ابزار قرار می دهد. در صورت نادرست بودن، از روش متن jQuery برای درج محتوا در dom استفاده می شود. اگر نگران حملات XSS هستید از متن استفاده کنید.

placement

string|function Default: top

data-placement

نحوه موقعیت دهی به ابزار را مشخص می کند (به عنوان مثال ، بالا | پایین | چپ | راست | خودکار).

وقتی خودکار مشخص شود ، به صورت پویا راهنمای ابزار را تغییر می دهد. به عنوان مثال ، اگر قرار دادن “خودکار چپ” باشد ، راهنما در صورت امکان به سمت چپ نمایش داده می شود ، در غیر این صورت به درستی نمایش داده می شود.

selector

string Default: false

data-selector

اگر یک انتخاب کننده ارائه شود، اشیا راهنمای ابزار به اهداف تعیین شده delegated می شوند.

title

string | function Default: “

data-title

در صورت عدم وجود ویژگی عنوان ، گزینه عنوان عنوان پیش فرض است.

trigger

string Default: ‘hover focus’

data-trigger

نحوه راه اندازی راهنمای ابزار را مشخص می کند: کلیک کنید | شناور | تمرکز | کتابچه راهنمای. ممکن است چندین راه انداز را منتقل کنید. آنها را با فاصله جدا کنید.

content

string | function Default: ”

data-content

اگر ویژگی محتوای داده وجود ندارد ، مقدار محتوای پیش فرض است

delay

number | object Default: 0

data-delay

تأخیر در نشان دادن و پنهان کردن نکته در ms – برای نوع ماشه دستی اعمال نمی شود. اگر یک عدد ارائه شود ، تأخیر برای پنهان کردن / نمایش دادن اعمال می شود. ساختار شی

تأخیر: {نمایش: 500 ، پنهان کردن: 100}

1	تأخیر: {نمایش: 500 ، پنهان کردن: 100}

container

string | false Default: false

data-container

راهنمای ابزار را به یک عنصر خاص اضافه می کند. مثال: “container: ‘body

متد ها

در زیر برخی از روش های مفید برای راهنمایی ابزار آمده است –

متد

توضیح

مثال

Options − .tooltip(options)

یک راهنمای ابزار به مجموعه عناصر متصل می شود.

$().tooltip(options)

1	$().tooltip(options)

Toggle − .tooltip(‘toggle’)

نکات راهنمای یک عنصر را تغییر می دهد.

$('#element').tooltip('toggle')

1	$('#element').tooltip('toggle')

Show − .tooltip(‘show’)

راهنمای یک عنصر را نشان می دهد.

$('#element').tooltip('show')

1	$('#element').tooltip('show')

Hide − .tooltip(‘hide’)

نکات راهنمای یک عنصر را پنهان می کند.

$('#element').tooltip('hide')

1	$('#element').tooltip('hide')

Destroy − .tooltip(‘destroy’)

نکات مهم یک عنصر را پنهان کرده و از بین می برد.

$('#element').tooltip('destroy')

1	$('#element').tooltip('destroy')

مثال

مثال زیر استفاده از افزونه tooltip از طریق ویژگی های داده را نشان می دهد.

&lt;div style = "padding: 100px 100px 10px;"&gt;
   This is a &lt;a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
      title = "show"&gt;Tooltip on method show&lt;/a&gt;.

   This is a &lt;a href = "#" class = "tooltip-hide" data-toggle = "tooltip" 
      data-placement = "left" title = "hide"&gt;Tooltip on method hide&lt;/a&gt;.

   This is a &lt;a href = "#" class = "tooltip-destroy" data-toggle = "tooltip" 
      data-placement = "top" title = "destroy"&gt;Tooltip on method destroy&lt;/a&gt;.

   This is a &lt;a href = "#" class = "tooltip-toggle" data-toggle = "tooltip" 
      data-placement = "bottom" title = "toggle"&gt;Tooltip on method toggle&lt;/a&gt;.
   
   &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
   
   &lt;p class = "tooltip-options" &gt;
      This is a &lt;a href = "#" data-toggle = "tooltip" title = "&lt;h2&gt;'am Header2
         &lt;/h2&gt;"&gt;Tooltip on method options&lt;/a&gt;.
   &lt;/p&gt;

   &lt;script&gt;
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });});
   &lt;/script&gt;
&lt;/div&gt;

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"

title = "show">Tooltip on method show</a>.

This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip"

data-placement = "left" title = "hide">Tooltip on method hide</a>.

This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip"

data-placement = "top" title = "destroy">Tooltip on method destroy</a>.

This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip"

data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.

This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2

</h2>">Tooltip on method options</a>.

</p>

$(function () { $('.tooltip-show').tooltip('show');});

$(function () { $('.tooltip-hide').tooltip('hide');});

$(function () { $('.tooltip-destroy').tooltip('destroy');});

$(function () { $('.tooltip-toggle').tooltip('toggle');});

$(function () { $(".tooltip-options a").tooltip({html : true });});

</script>

</div>

رویدادها

جدول زیر رویدادهای کار با افزونه tooltip را لیست می کند. این رویداد ممکن است برای اتصال به عملکرد استفاده شود.

رویداد

توضیح

مثال

show.bs.tooltip

این رویداد با فراخوانی روش show instance بلافاصله آغاز می شود.

<span class="pln">$</span><span class="pun">(</span><span class="str">'#myTooltip'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'show.bs.tooltip'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
   <span class="com">// do something</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#myTooltip'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'show.bs.tooltip'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>

<span class="com">// do something</span>

shown.bs.tooltip

این رویداد هنگامی که راهنمای ابزار برای کاربر قابل مشاهده شده است خاموش می شود (منتظر می ماند تا انتقال CSS کامل شود).

<span class="pln">$</span><span class="pun">(</span><span class="str">'#myTooltip'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'shown.bs.tooltip'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
   <span class="com">// do something</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#myTooltip'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'shown.bs.tooltip'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>

<span class="com">// do something</span>

hide.bs.tooltip

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

<span class="pln">$</span><span class="pun">(</span><span class="str">'#myTooltip'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'hide.bs.tooltip'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
   <span class="com">// do something</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#myTooltip'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'hide.bs.tooltip'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>

<span class="com">// do something</span>

hidden.bs.tooltip

این رویداد پس از پنهان شدن راهنمای ابزار از کاربر خاموش می شود (منتظر می ماند تا انتقال CSS کامل شود).

<span class="pln">$</span><span class="pun">(</span><span class="str">'#myTooltip'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'hidden.bs.tooltip'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>
   <span class="com">// do something</span>
<span class="pun">})</span>

<span class="pln">$</span><span class="pun">(</span><span class="str">'#myTooltip'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'hidden.bs.tooltip'</span><span class="pun">,</span> <span class="kwd">function</span> <span class="pun">()</span> <span class="pun">{</span>

<span class="com">// do something</span>

مثال

مثال زیر استفاده از افزونه tooltip از طریق ویژگی های داده را نشان می دهد.

&lt;h4&gt;Tooltip examples for anchors&lt;/h4&gt;

This is a &lt;a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip"&gt;Default Tooltip&lt;/a&gt;.

&lt;script&gt;
   $(function () { $('.tooltip-show').tooltip('show');});
   
   $(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
      alert("Alert message on show");
   })});
&lt;/script&gt;

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"

title = "Default Tooltip">Default Tooltip</a>.

$(function () { $('.tooltip-show').tooltip('show');});

$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {

alert("Alert message on show");

})});

</script>

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی پایتون آموزش بوت استرپ

نویسنده مطلب saber

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

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

کاربردهای پلاگین tooltip ابزار در بوت استرپ

مثال

گزینه ها

متد ها

مثال

رویدادها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

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

کاربردهای پلاگین tooltip ابزار در بوت استرپ

مثال

گزینه ها

متد ها

مثال

رویدادها

مثال

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه