آموزش کامل پلاگین Tool tip در بوت استرپ با مثال و نمونه کد

پلاگین Tool tip

پلاگین های بوت استرپ

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

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

نحوه کاربرد

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

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

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

• از طریق جاوا اسکریپت : راه اندازی tooltip از طریق جاوا اسکریپت :

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

نکته : پلاگین Tooltip مانند پلاگین dropdown و سایر پلاگین های بحث شده در مقاله های قبلی ، فقط پلاگین های css نیستند. برای استفاده از این پلاگین ، باید آن را با استفاده از jquery فعال کنیم. برای فعال کردن تمام tooltip ها در صفحه خود کافی است از این اسکریپت استفاده کنیم :

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

مثال

مثال زیر ، نحوه کاربرد پلاگین tooltip از طریق ویژگی های داده را نشان می دهد :

<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>

<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
   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>

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

خروجی قطعه کد فوق به صورت زیر می باشد :

آپشن ها

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

delay: { show: 500, hide: 100 }

متدها

در جدول زیر برخی از متدهای کاربردی مربوط به tooltip ارائه شده است :

$().tooltip(options)

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

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

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

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

مثال

مثال زیر نحوه استفاده از پلاگین tooltip را با استفاده از ویژگی های داده نشان می دهد :

<div style = "padding: 100px 100px 10px;">
   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>.
   
   <br><br><br><br><br><br>
   
   <p class = "tooltip-options" >
      This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
         </h2>">Tooltip on method options</a>.
   </p>

   <script>
      $(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 کار می کنند ، فهرست نموده است. این رویدادها ممکن است به تابع متصل شوند.

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

   // do something

})

$('#myTooltip').on('shown.bs.tooltip', function () {

   // do something

})

$('#myTooltip').on('hide.bs.tooltip', function () {

   // do something

})

$('#myTooltip').on('hidden.bs.tooltip', function () {

   // do something

})

مثال

مثال زیر نحوه کاربرد پلاگین tooltip را با استفاده از ویژگی های داده نشان می دهد :

<h4>Tooltip examples for anchors</h4>

This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip" 
   title = "Default Tooltip">Default Tooltip</a>.

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

خروجی قطعه کد فوق به صورت زیر می باشد :