Bootstrap Tooltip Plugin
البرنامج المساعد Tooltip
المكوِّن الإضافي Tooltip هو مربع منبثق صغير يظهر عندما يحرك المستخدم مؤشر الماوس فوق عنصر:
نصيحة: يمكن تضمين الإضافات بشكل فردي (باستخدام ملف "tooltip.js" الفردي الخاص بـ Bootstrap) ، أو كلها مرة واحدة (باستخدام "bootstrap.js" أو "bootstrap.min.js").
كيفية إنشاء تلميح
لإنشاء تلميح أداة ، أضف data-toggle="tooltip"
السمة إلى عنصر.
استخدم titleالسمة لتحديد النص الذي يجب عرضه داخل تلميح الأداة:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
ملاحظة: يجب تهيئة تلميحات الأدوات باستخدام jQuery: حدد العنصر المحدد واستدعاء tooltip()الطريقة.
سيمكن الكود التالي جميع تلميحات الأدوات في المستند:
مثال
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
تحديد المواقع تلميحات
بشكل افتراضي ، سيظهر تلميح الأداة أعلى العنصر.
استخدم data-placementالسمة لتعيين موضع التلميح على الجانب العلوي أو السفلي أو الأيسر أو الأيمن من العنصر:
مثال
<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>
نصيحة: يمكنك أيضًا استخدام data-placementالسمة بقيمة " auto" ، والتي ستتيح للمتصفح تحديد موضع تلميح الأداة. على سبيل المثال ، إذا كانت القيمة " auto left" ، فسيتم عرض تلميح الأداة على الجانب الأيسر عندما يكون ذلك ممكنًا ، وبخلاف ذلك على اليمين.
استكمال مرجع تلميحات Bootstrap
للحصول على مرجع كامل لجميع خيارات تلميح الأدوات والأساليب والأحداث ، انتقل إلى مرجع تلميح Bootstrap JS الخاص بنا .