تعتبر تلميحات الأدوات مفيدة جدًا عندما تريد وصف الرابط. المكون الإضافي Tooltip مستوحى من jQuery.tipsy التي كتبها Jason Frame. قام المكون الإضافي لسلطة الأدوات بإجراء العديد من التحسينات ، مثل عدم الاعتماد على الصور ، ولكن بدلاً من ذلك باستخدام CSS لتحقيق تأثيرات الرسوم المتحركة واستخدام سمات البيانات لتخزين معلومات العنوان.
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى tooltip.js. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
1. الاستخدام
توليد المكونات الإضافية لتصميم الأدوات المحتوى والعلامات بناءً على المتطلبات. بشكل افتراضي ، يتم وضع تلميحات الأدوات خلف عناصر الزناد. هناك طريقتان يمكنك إضافة تلميحات الأدوات:
1. من خلال سمة البيانات: إذا كنت بحاجة إلى إضافة مجموعة أدوات ، فقط أضف toggle = "Tooltip" إلى علامة مرساة. عنوان المرساة هو نص تلميح الأدوات. بشكل افتراضي ، يقوم المكون الإضافي بتعيين تلميح الأدوات في الأعلى.
<a href = "#" data-toggle = "tooltip"> من فضلك تحوم فوقي </a>
2. من خلال JavaScript: Trigger Tooltip (Tooltip) من خلال JavaScript:
$ ('#Identifier'). Tooltip (خيارات)لا يشبه المكون الإضافي لقطعة الأدوات القوائم المنسدلة والمكونات الإضافية الأخرى التي تمت مناقشتها مسبقًا ، فهي ليست مكونًا مكونًا من CSS خالصًا. لاستخدام المكون الإضافي ، يجب عليك تنشيطه باستخدام jQuery (اقرأ JavaScript). استخدم البرنامج النصي التالي لتمكين جميع تلميحات الأدوات في الصفحة:
$ (function () {$ ("[data-toggle = 'tooltip']"). tooltip () ؛}) ؛2. الخيارات
هناك بعض الخيارات التي يتم إضافتها من خلال API لبيانات BootStrap (API BootStrap) أو استدعاء من خلال JavaScript. يسرد الجدول التالي هذه الخيارات:
ثلاثة. تلميحات الأدوات
// مثال أساسي <a href = "#" data-toggle = "tooltip"> html5 </a> // يحتاج جزء JS إلى الإعلان $ ('#section'). Tooltip () ؛تحتوي تلميحات الأدوات على العديد من الخصائص لتكوين عرض المطالبات ، على النحو التالي:
<a href = "#" rel = "tooltip" data-toggle = "tooltip" hanimation = "false" data-html = "true" data-placement = "auto" data-selector = "a [rel = tooltip]
فقط قم بإزالة البيانات السابقة في JavaScript. بما في ذلك: الرسوم المتحركة ، HTML ، الموضع ، المحدد ، العنوان الأصلي ، العنوان ، المشغل ، التأخير ، الحاوية والقالب وغيرها من الخصائص.
// javaScript method $ ('#section a'). tooltip ({delay: {show: 500 ، hide: 100 ،} ، container: 'body'}) ؛هناك أربع طرق لـ JavaScript: عرض وإخفاء وتبديل وتدمير.
// show $ ('#القسم A'). Tooltip ('show') ؛ // Hide $ ('#القسم A'). Tooltip ('Hide') ؛ // invert show and hide $ ('#section a').هناك أربعة أنواع من الأحداث في Tooltip.
// الأحداث ، أوجه التشابه الأخرى
$ ('#select a'). on ('show.bs.tooltip' ، function () {Alert ('Free at the show in the show!') ؛}) ؛تم تجميع هذه السلسلة من البرامج التعليمية في: Bootstrap Basic Prosorials Secorts ، مرحبًا بك في النقر للتعلم.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل 3 موضوعات مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.