افزونه Tooltip بوت استرپ
پلاگین Tooltip جعبه پاپ آپ کوچک است که وقتی کاربر اشاره گر موس را بر روی یک عنصر حرکت می دهد ظاهر می شود:
چگونه یک ToolTip ایجاد کنیم؟
برای ایجاد یک راهنمای ابزار در بوت استرپ ، ویژگی attribute-toggle = “tooltip” را به یک عنصر اضافه کنید.
از ویژگی title برای مشخص کردن متن که باید در داخل view مورد نظر نمایش داده شود استفاده کنید:
|
1 |
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> |
توجه: tTooltip باید با jQuery راه اندازی شود: عنصر مشخص شده را انتخاب کرده و با متد tooltip () آن را فراخوانی بگیرید.
کد زیر tooltip را درون سند فعال می کند:
|
1 2 3 4 5 |
<script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> |
تنظیم موقعیت Tooltip بوت استرپ
به طور پیش فرض، tooltip در بالای عنصر ظاهر می شود.برای تعیین موقعیت tooltip در بالا، پایین، سمت چپ یا سمت راست عنصر، از ویژگی data-placement استفاده کنید.
مثال
|
1 2 3 4 |
<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> |
[highlight color=”yellow”]نکته: شما همچنین می توانید از ویژگی “data-placement” با مقدار “auto” استفاده کنید که به مرورگر اجازه می دهد که موقعیت tooltip را تعیین کند. به عنوان مثال، اگر مقدار “auto left” باشد، در صورت لزوم، tooltip در سمت چپ نمایش داده می شود، در غیر این صورت در سمت راست.[/highlight]
مطالب زیر را حتما مطالعه کنید
افزونه و کلاس Carousel در بوت استرپ bootstrap
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
دیدگاهتان را بنویسید