Bootstrap 4

Tooltips




bootstrap

وثائق وأمثلة لإضافة أدوات تعريف Bootstrap المخصصة باستخدام CSS وجافا سكريبت باستخدام CSS3 للصور المتحركة وخصائص البيانات لتخزين العنوان المحلي.

نظرة عامة

أشياء يجب معرفتها عند استخدام المكوِّن الإضافي للأداة:

  • تعتمد تلميحات الأدوات على مكتبة 3rd Popper.js لتحديد المواقع. يجب عليك تضمين popper.min.js قبل bootstrap.js أو استخدام bootstrap.bundle.min.js / bootstrap.bundle.js الذي يحتوي على Popper.js لكي تعمل tooltips!
  • إذا كنت تقوم ببناء جافا سكريبت لدينا من المصدر ، فإنه يتطلب util.js
  • يتم تمكين أدوات تعريف التطبيقات لأسباب تتعلق بالأداء ، لذلك يجب عليك تهيئةها بنفسك .
  • لا يتم أبدًا عرض تلميحات الأدوات ذات العناوين ذات الطول الصفري.
  • حدد container: 'body' لتجنب مشاكل العرض في مكونات أكثر تعقيدًا (مثل مجموعات الإدخال ومجموعات الأزرار ، إلخ).
  • لن تعمل تلميحات أدوات التشغيل على العناصر المخفية.
  • يجب تشغيل تلميحات الأدوات الخاصة .disabled أو disabled على عنصر مجمّع.
  • عندما يتم تشغيلها من ارتباطات تشعبية تمتد عبر خطوط متعددة ، سيتم توسيط تلميحات الأدوات. استخدم white-space: nowrap; على <a> s لتجنب هذا السلوك.
  • يجب إخفاء تلميحات الأدوات قبل إزالة العناصر المقابلة لها من DOM.

حصلت على كل هذا؟ عظيم ، دعونا نرى كيف يعملون مع بعض الأمثلة.

مثال: تمكين تلميحات الأدوات في كل مكان

تتمثل إحدى الطرق لتهيئة جميع تلميحات الأدوات في الصفحة في تحديدها حسب سمة data-toggle :

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

أمثلة

مرّر فوق الروابط أدناه لترى تلميحات الأدوات:

مثال مفتوح على getbootstrap.com

مرّر مؤشر الماوس فوق الأزرار أدناه لرؤية اتجاهات الأدوات الأربعة: أعلى اليمين واليسار واليسار.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

مع إضافة HTML المخصص:

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

استعمال

ينشئ المكون الإضافي لتلميحات الأدوات محتوى وترميزًا حسب الطلب ، وبواسطة الأدوات الافتراضية لتعيين تلميحات الأدوات بعد عنصر المشغل.

تشغيل تلميح الأداة عبر JavaScript:

$('#example').tooltip(options)

وضع علامة على

الترميز المطلوب لتلميح الأدوات هو فقط سمة data title على عنصر HTML ترغب في الحصول على تلميح أدوات. يعد ترميز تلميح الأدوات الذي تم إنشاؤه بسيطًا إلى حد ما ، على الرغم من أنه يتطلب وضعًا (افتراضيًا ، مضبوطًا على top خلال المكوِّن الإضافي).

عمل تلميحات الأدوات تعمل لمستخدمي لوحة المفاتيح والتقنية المساعدة

يجب عليك فقط إضافة تلميحات الأدوات إلى عناصر HTML التي تكون تقليدية التركيز على لوحة المفاتيح والتفاعلية (مثل الارتباطات أو عناصر التحكم بالنماذج). على الرغم من أن عناصر HTML العشوائية (مثل <span> s) يمكن جعلها tabindex="0" عن طريق إضافة tabindex="0" ، فإن ذلك سيؤدي إلى إضافة علامات تبويب مزعجة ومربكة محتملة على عناصر غير تفاعلية لمستخدمي لوحة المفاتيح. بالإضافة إلى ذلك ، لا تعلن معظم التقنيات المساعدة حاليًا عن تلميح الأدوات في هذه الحالة.

بالإضافة إلى ذلك ، لا تعتمد فقط على hover كمشغل لتلميحتك ، لأن هذا سيجعل من المستحيل تشغيل أدواتك لمستخدمي لوحة المفاتيح.

<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

العناصر المعطلة

العناصر ذات السمة disabled ليست تفاعلية ، بمعنى أنه لا يمكن للمستخدمين التركيز ، أو التمرير ، أو النقر عليها لتشغيل أداة تلميح (أو زر). كحل بديل ، ستحتاج إلى تشغيل تلميح الأدوات من مجمّع <div> أو <span> ، tabindex="0" بشكل مثالي باستخدام لوحة المفاتيح باستخدام tabindex="0" ، وتجاوز pointer-events على العنصر الذي تم تعطيله.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. بالنسبة لسمات البيانات ، قم بإلحاق اسم الخيار data- ، كما هو الحال في data-animation="" .

اسم اكتب افتراضي وصف
الرسوم المتحركة منطقية صحيح تطبيق انتقال تتلاشى CSS إلى تلميح الأدوات
حاوية سلسلة | عنصر | خاطئة خاطئة

يضيف تلميح الأدوات إلى عنصر محدد. مثال: container: 'body' . يعتبر هذا الخيار مفيدًا بشكل خاص لأنه يسمح لك بوضع تلميح الأدوات في تدفق المستند بالقرب من عنصر التشغيل - والذي سيمنع تلميح الأداة من الطفو بعيدًا عن عنصر التشغيل أثناء تغيير حجم النافذة.

تأخير رقم | موضوع 0

لا ينطبق التأخير الذي يظهر وإخفاء تلميح الأدوات (ms) - على نوع المشغل اليدوي

إذا تم توفير رقم ، يتم تطبيق التأخير على كل من إخفاء / إظهار

بنية الكائن هي: delay: { "show": 500, "hide": 100 }

أتش تي أم أل منطقية خاطئة

اسمح بـ HTML في تلميح الأدوات.

إذا كان هذا صحيحًا ، فسيتم عرض علامات HTML في title تلميح الأدوات في تلميح الأدوات. إذا كانت false ، فسيتم استخدام طريقة text jQuery لإدراج محتوى في DOM.

استخدم النص إذا كنت قلقًا بشأن هجمات XSS.

تحديد مستوى سلسلة | وظيفة 'أعلى'

كيفية وضع تلميح الأدوات - تلقائي | أعلى | أسفل اليسار | حق.
عند تحديد auto ، سيتم إعادة توجيه تلميح الأدوات ديناميكيًا.

عند استخدام دالة لتحديد الموضع ، يتم استدعاؤه باستخدام عقدة DOM لعلامة الأدوات كوسيطة أولى لها وعقدة DOM لعنصر المشغل كدليل لها. يتم تعيين this السياق على مثيل تلميح الأدوات.

منتخب سلسلة | خاطئة خاطئة إذا تم توفير محدد ، سيتم تفويض كائنات تلميح الأدوات إلى الأهداف المحددة. في الممارسة العملية ، يتم استخدام هذا لتمكين محتوى HTML الديناميكي لإضافة popovers. انظر this ومثال غني بالمعلومات .
قالب خيط '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

HTML الأساسي لاستخدامه عند إنشاء تلميح الأدوات.

سيتم حقن title تلميح الأدوات في .tooltip-inner .

.arrow سهم تلميح الأداة.

يجب أن يحتوي عنصر المجمّع الأبعد على class .tooltip و role="tooltip" .

عنوان سلسلة | عنصر | وظيفة ''

قيمة العنوان الافتراضية إذا لم تكن سمة title موجودة.

إذا تم إعطاء دالة ، فسيتم استدعاؤها مع مجموعة المرجع this إلى العنصر الذي تم إرفاق تلميح الأدوات به.

اثار خيط "تمحور التركيز"

كيف يتم تشغيل تلميح الأدوات - انقر فوق | تحوم | التركيز | كتيب. قد تمر عدة محفزات. فصلها مع الفضاء.

يشير 'manual' إلى أن تلميح الأداة سيتم تشغيله برمجيًا عبر .tooltip('show') ، و .tooltip('hide') و .tooltip('toggle') الطرق ؛ لا يمكن دمج هذه القيمة مع أي مشغل آخر.

سيؤدي 'hover' بمفرده إلى ظهور تلميحات لا يمكن تشغيلها عبر لوحة المفاتيح ، ويجب استخدامها فقط في حالة وجود طرق بديلة لنقل المعلومات نفسها لمستخدمي لوحة المفاتيح.

الأوفست رقم | خيط 0 إزاحة تلميح الأداة بالنسبة إلى هدفه. لمزيد من المعلومات ، راجع مستندات إزاحة Popper.js.
fallbackPlacement سلسلة | مجموعة مصفوفة 'يواجه' السماح لتحديد أي موقف ستستخدم بوبر على التراجع. لمزيد من المعلومات ، راجع مستندات سلوك Popper.js
حدود سلسلة | جزء "scrollParent" حدود قيد تجاوز تلميح الأداة. يقبل قيم 'viewport' أو 'window' أو 'scrollParent' أو مرجع HTMLElement (JavaScript فقط). للحصول على مزيد من المعلومات ، راجع مستندات منع Poperver.js .

سمات البيانات لطلقات الأدوات الفردية

يمكن بدلاً من ذلك تحديد خيارات لأدوات الأدوات الفردية من خلال استخدام سمات البيانات ، كما هو موضح أعلاه.

أساليب

أساليب غير متزامنة وانتقالات

جميع طرق API غير متزامنة وتبدأ مرحلة انتقالية . يعودون إلى المتصل حالما يبدأ الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء الأسلوب على مكون النقل .

راجع وثائق جافا سكريبت لدينا لمزيد من المعلومات.

$().tooltip(options)

يرفق معالج تلميح الأدوات بمجموعة العناصر.

.tooltip('show')

تكشف عن تلميح عنصر من العنصر. إرجاع إلى المتصل قبل أن يظهر تعريف الأداة بالفعل (أي قبل حدوث حدث shown.bs.tooltip ). يُعد هذا بمثابة "دليل" يؤدي إلى تشغيل تلميح الأدوات. لا يتم أبدًا عرض تلميحات الأدوات ذات العناوين ذات الطول الصفري.

$('#element').tooltip('show')

.tooltip('hide')

يخفي تلميحًا لأحد العناصر. إرجاع إلى المتصل قبل إخفاء تلميح الأداة بالفعل (أي قبل حدوث حدث hidden.bs.tooltip ). يُعد هذا بمثابة "دليل" يؤدي إلى تشغيل تلميح الأدوات.

$('#element').tooltip('hide')

.tooltip('toggle')

تبديل تلميح أداة العنصر. إرجاع إلى المتصل قبل أن يظهر shown.bs.tooltip أو تم إخفاؤه بالفعل (أي قبل hidden.bs.tooltip حدث hidden.bs.tooltip أو hidden.bs.tooltip ). يُعد هذا بمثابة "دليل" يؤدي إلى تشغيل تلميح الأدوات.

$('#element').tooltip('toggle')

.tooltip('dispose')

يخفي ويدمر تلميحات عنصر ما. لا يمكن تدمير تلميحات الأدوات التي تستخدم التفويض (والتي يتم إنشاؤها باستخدام خيار selector ) بشكل فردي على عناصر التشغيل التابعة.

$('#element').tooltip('dispose')

.tooltip('enable')

يعطي تلميحًا لأحد العناصر إمكانية إظهاره. يتم تمكين تلميحات الأدوات افتراضيًا.

$('#element').tooltip('enable')

.tooltip('disable')

يزيل القدرة على عرض تلميح عنصر ما. لن يمكن عرض تلميح الأدوات إلا إذا تمت إعادة تمكينه.

$('#element').tooltip('disable')

.tooltip('toggleEnabled')

لتبديل القدرة على عرض تلميح عنصر ما أو إخفائه.

$('#element').tooltip('toggleEnabled')

.tooltip('update')

لتحديث موقع تلميح الأدوات الخاص بعنصر.

$('#element').tooltip('update')

أحداث

نوع الحدث وصف
show.bs.tooltip ينطلق هذا الحدث فورًا عندما يتم استدعاء طريقة مثيل show .
shown.bs.tooltip يتم تشغيل هذا الحدث عندما يكون تلميح الأدوات مرئيًا للمستخدم (سينتظر اكتمال انتقالات CSS).
hide.bs.tooltip يتم تشغيل هذا الحدث على الفور عندما تم استدعاء أسلوب مثيل المخفية.
hidden.bs.tooltip يتم تشغيل هذا الحدث عند الانتهاء من إخفاء تلميح الأداة من المستخدم (سينتظر انتهاء انتقالات CSS).
inserted.bs.tooltip يتم تشغيل هذا الحدث بعد الحدث show.bs.tooltip عند إضافة قالب تلميح الأدوات إلى DOM.
$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})