با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 4 ، را دنبال می کنند. در زمانی که وب سایتهای مختلف را بررسی می کنید،اگر دقت کرده باشید وقتی اشاره گر ماوس را روی هر کدام از عناصر html وب سایت از جمله Button می برید یک پیغام راهنما ی کوچک در پایین همان عنصر،ظاهر می شود،که Tooltip نامیده می شود. در این بخش چگونگی ایجاد این پیغام راهنما در Bootstrap 4 را به همراه چگونگی تغییر قالب و فرمت آن، ارائه خواهیم داد. در ادامه ی این آموزش به منظور آشنایی با ویژگی Tooltip در Bootstrap 4 و طرز استفاده از آن، با ما همراه باشید.
Tooltip برای نمایش یک پیغام راهنما در حاشیه یا لبه ی عناصر html، زمانیکه کاربر اشاره گر ماوس را روی آن می برد، استفاده می شود.
برای ایجاد یک tooltip در هر عنصر html، کلاس data-toggle="tooltip"
را به آن عنصر، اضافه کنید:
از کلاس title
نیز برای افزودن متن پیغام راهنما ، استفاده کنید:
1 | <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> |
نکته: برای استفاده از tooltip ،کدهای jQuery نیز، لازم است: عنصر مورد نظر را انتخاب کرده و تابع ()tooltip
را فراخوانی کنید:
مثال کد jQuery زیر، ویژگی tooltip را در عنصر مربوطه، فعال می کند:
1 2 3 4 5 | <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> |
برای تعیین محل ظاهر شدن پیغام راهنما در عناصر html، از لیست کدهای زیر استفاده کنید:
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> |
با یادگیری مباحث این بخش، می توانید برای تمام عناصر html صفحه وب خود، از tooltip استفاده کنید تا کاربران از عملکرد هر بخش از صفحه وب شما آگاهی داشته باشند و دچار سردرگمی نشوند. امیدواریم که از مباحث آشنایی با ویژگی Tooltip در Bootstrap 4 نهایت استفاده را برده باشید.