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