Tooltip در Bootstrap ورژن 4

Tooltip جعبه پاپ آپ کوچک است که وقتی کاربر نشانگر ماوس را بر روی یک عنصر حرکت می دهد ظاهر می شود:

چگونه یک Tooltip ایجاد کنیم

برای ایجاد یک ابزار Tooltip ، ویژگی  attribute-toggle = "tooltip" را به یک عنصر اضافه کنید.

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

توجه: Tooltip باید با jQuery راه اندازی شود: عنصر مشخص شده را انتخاب کرده و با متد tooltip () ارتباط دهید.
کد زیر تمام ابزار  Tooltip را در سند فعال می کند:

tooltup در jquery
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>
مشاهده مثال

مکان Tooltip

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

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

مکان Tooltip ها
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
مشاهده مثال


 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز