شبيبة تلميح الأدوات (tooltip.js)
البرنامج المساعد تلميح الأدوات هو مربع صغير المنبثقة التي تظهر عندما يقوم المستخدم بتحريك مؤشر الماوس فوق عنصر.
لتعليمي حول تلميحات، اقرأ Bootstrap Tooltip تعليمي .
عبر data-* سمات
و data-toggle="tooltip" ينشط تلميح الأدوات.
و title تحدد سمة النص الذي يجب عرضه داخل تلميح الأدوات.
عن طريق جافا سكريبت
تلميحات ليست الإضافات-CSS الوحيد، وبالتالي لا بد من تهيئة مع مسج: اختيار العنصر المحدد واستدعاء tooltip() الأسلوب.
مثال
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
انها محاولة لنفسك » خيارات تلميح الأدوات
يمكن أن تنتقل عن طريق الخيارات سمات البيانات أو جافا سكريبت. لسمات البيانات، إلحاق اسم الخيار ل data- كما في data-placement="" .
| اسم | اكتب | افتراضي | وصف | جربها |
|---|---|---|---|---|
| animation | boolean | true | تحدد ما إذا كان لإضافة تأثير انتقال CSS تتلاشى عندما إظهار وإخفاء تلميح الأدوات
| جربها |
| وعاء | سلسلة، أو كاذبة منطقية | خاطئة | إلحاق تلميح الأدوات لعنصر معين. على سبيل المثال: الحاويات: 'body' | جربها |
| delay | number, or object | 0 | يحدد عدد من ميلي ثانية من الوقت سيستغرق لإظهار وإخفاء تلميح الأدوات. لتحديد تأخير لعرض واحد آخر للاختباء، استخدم بنية الكائن: delay: {show: 500, hide: 100} - والتي سوف تتخذ 500 مللي ثانية لإظهار tooltip ، ولكن 100 فقط مللي ثانية لإخفائه | جربها |
| html | boolean | false | يحدد ما إذا كانت تقبل علامات HTML في تلميح الأدوات:
عندما وضعت لكاذبة (الافتراضي)، jQuery's text() سيتم استخدام الأسلوب. استخدام هذا إذا كنت قلقا بشأن هجمات XSS | جربها |
| placement | string | "top" | يحدد موضع تلميح الأدوات. القيم الممكنة:
| جربها |
| selector | string, or the boolean false | false | ويضيف تلميح الأدوات إلى محدد المحدد | جربها |
| template | string | HTML الأساسي لاستخدامها عند إنشاء تلميح الأدوات. سيتم إدراج عنوان تلميح الأدوات لفي عنصر وجود الطبقة .tooltip-inner وعنصر مع الطبقة .tooltip-arrow سيصبح السهم تلميح الأدوات ل. وينبغي أن يكون العنصر المجمع الأبعد من .tooltip الطبقة. | ||
| title | string | "" | يحدد النص الذي يجب عرضه داخل تلميح الأدوات | جربها |
| trigger | string | "hover focus" | يحدد كيف يتم تشغيل تلميح الأدوات. القيم الممكنة:
| جربها |
| viewport | string, or object | {selector: "body", padding: 0} | يحتفظ تلميح الأدوات ضمن حدود هذا العنصر. على سبيل المثال: viewport: '#viewport' أو {selector: '#viewport', padding: 0} |
طرق تلميح الأدوات
يسرد الجدول التالي أساليب التلميح كل ما هو متاح.
| طريقة | وصف | جربها |
|---|---|---|
| .tooltip( options ) | ينشط تلميح الأدوات مع وجود خيار. رؤية الخيارات المذكورة أعلاه لقيم صالحة | جربها |
| .tooltip("show") | يظهر تلميح الأدوات | جربها |
| .tooltip("hide") | يخفي تلميح الأدوات | جربها |
| .tooltip("toggle") | تبديل تلميح الأدوات | جربها |
| .tooltip("destroy") | يخفي ويدمر تلميح الأدوات | جربها |
الأحداث تلميح الأدوات
يسرد الجدول التالي الأحداث تلميح الأداة كل ما هو متاح.
| حدث | وصف | جربها |
|---|---|---|
| show.bs.tooltip | يحدث عندما تلميح الأدوات على وشك أن تظهر | جربها |
| shown.bs.tooltip | يحدث عندما يتم عرض تلميح الأدوات بالكامل (بعد الانتهاء التحولات CSS) | جربها |
| hide.bs.tooltip | يحدث عندما تلميح الأدوات على وشك أن تكون مخفية | جربها |
| hidden.bs.tooltip | يحدث عندما يتم إخفاء تلميح الأدوات بالكامل (بعد الانتهاء التحولات CSS) | جربها |
أمثلة
العرف تصميم تلميح الأدوات
استخدام CSS لتخصيص مظهر من تلميح الأدوات:
مثال
/* Tooltip */
.test + .tooltip > .tooltip-inner {
background-color:
#73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.test + .tooltip.top >
.tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.test + .tooltip.bottom
> .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.test + .tooltip.left
> .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.test + .tooltip.right
> .tooltip-arrow {
border-right: 5px solid black;
} انها محاولة لنفسك »