در HTML , می توانیم یک خاصیت title به المنت اضافه کنیم. متن مشخص شده در این خصوصیت به عنوان تولتیپ (Tooltip) با انجام رویداد mouse over نماش داده می شود.
در این آموزش jQuery , قصد داریم به شما نحوه ساخت Tooltip با استفاده از Bootstrap و قابلیت های استاندارد آن بر روی تولتیپ ها را نمایش بدیم.
ما تولتیپ بوت استرپ را با استفاده از سلکتور id که به تابع Tooltip پاس داده شده, مقدار دهی می کنم. در آموزش های قبلی با نحوه نمایش پیام اعتبارسنجی با Tooltip را دیدیم.
کتابخانه Tooltip بوت استرپ که تحت jQuery است, شامل آپشن های مختلفی برای سفارشی سازی استایل, سرعت, محتوا و بیشتر دارد. ما این مقادیر پیش فرض را هنگام فراخوانی تابع tooltip , بازنویسی کنیم.
در این مثال ساخت Tooltop با Bootstrap , مقدار delay را برای نمایش افکت انیمیشن و گزینه title را به همراه JavaScript ست می کنیم. اگر هیچ خصوصیت title مشخص نشود و یا خالی باشد پس title مشخص شده در جاوااسکریپت در داخل tooltip نمایش داده خواهد شد.
کد HTML المنت دارای Tooltip
کد زیر به شما یک المان که قرار است با رفتن ماوس روی آن, تابع tooltip روی آن صدا زده شود را نشان می دهد. این کد شامل چهار تگ DIV است که با hover شدن ماوس tooltip مورد نظر بر اساس خاصیت data-placement نمایش داده می شود.
|
1 2 3 4 5 6 |
<div class="tooltip-buttons"> <div class="btnTooltip" data-placement="top" title="Tooltip showing in the top position.">Top</div> <div class="btnTooltip" data-placement="right">Right</div> <div class="btnTooltip" data-placement="bottom">Bottom</div> <div class="btnTooltip" data-placement="left" title="Tooltip showing in the left position.">Left</div> </div> |
اسکریپت jQuery بر ساخت Tooltop
کد جی کوئری زیر به شما نحوه فراخوانی تابع tooltip با مشخص کردن آپشن های آن به عنوان آرگومان را نشان می دهد. در اینجا, مقدار delay و title ست شده است.
آپشن title شامل محتویات HTML است. در صورتی که مقدار html را true قرار دهید, در title می توانید کدهای HTML نیز قرار بدید.
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $('.btnTooltip').tooltip({ delay: { "show": 500, "hide": 100 }, title:"<strong class='txt-highlight'>Title is from the JavaScript</strong> as given as the Tooltip options.", html:true, }); }); </script> |
جدول زیر به شما چندین آپشن دیگر از تابع tooltip و همچنین مقادیر پیش فرض را نشان می دهد.
| Option | Description | Default |
|---|---|---|
| animation | To add fade in / fade out effect to the tooltip popup. | true |
| container | To specify the element name within which the tooltip markup should be created dynamically to avoid overflow. | false |
| delay | To specify the time in millisecond for the animation effect. | ۰ |
| html | It has boolean value to allow HTML code in the tooltip. | true |
| placement | It is to specify the position of the tooltip (top, right, bottom, left) | top |
| template | HTML template for the tooltip message. The title text will be included inside the div containing the class name tooltip-inner | ‘<div class=”tooltip” role=”tooltip”><div class=”tooltip-arrow”></div><div class=”tooltip-inner”></div></div>’ |
| title | It accepts text/HTML to be added in the tooltip popup. If the html is true then the HTML code will be included. Otherwise, the HTML tags are stripped and the text content is included in the tooltip. | ” |
| trigger | event method like hover, focus, and manual that are to be used for triggering the tooltip. It accepts multiple trigger events | ‘hover focus’ |
خروجی ساخت Tooltop با Bootstrap
اسکرین شات زیر به شما پاپ آپ های تولتیپ المنت هایی که شامل title هستند را نشان می دهد. همچنین تولتیپ هایی که مقدار title ندارند و توسط جاوااسکریپت برای آنها عنوان مشخص کردیم را نیز می بینید.
کتابخانه Bootstrap.js
یک معرفی سریع درباره bootstrap.js برای کسانی که با آن آشنا نیستد. Bootstrap (بوت استرپ) مقدار زیادی از پلاگین های سفارشی جی کوئری را ارایه می دهد. همه این پلاگین ها در bootstrap.js وجود دارند یا می توانید فقط پلاگین های مورد نیاز را از اینجا دانلود و سفارشی سازی کنید. این پلاگین jQuery بوت استرپ دارای جی کوئری و چندین کتابخانه دیگر نیز هستند.
می توانید صفحه داکیومنت هر کدام از پلاگین ها را جداگانه مطالعه کنید. در آموزش ساخت Tooltop با بوت استرپ از بسته کامل یعنی bootstrap.js استفاده کردیم.
امیدوارم از آموزش ساخت Tooltip با بوت استرپ نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
سلام. اگر متنی حاوی لینک داخل تولتیپ باشه ، امکان کلیک کردن روی اون لینک وجود داره؟
فرض کنید مثلا متن داخل تولتیپ : برای کسب اطلاعات بیشتر اینجا مراجعه کنید.
میخوام کاربر روی اینجا کلیک کنه و …
سلام. خیر باید بصورت دستی بدون پلاگین تولتیپ شخصی خود را بنویسید یا از افزونه های معروف تولتیپ که این قابلیت را دارند استفاده کنید.
موفق باشید.