تلميحات

ملخص

أشياء يجب معرفتها عند استخدام البرنامج المساعد لتلميح الأدوات:

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

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

مثال: قم بتمكين التلميحات في كل مكان

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

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

أمثلة

مرر مؤشر الماوس فوق الروابط أدناه لمشاهدة تلميحات الأدوات:

قم بالمرور فوق الأزرار أدناه لمشاهدة اتجاهات تلميحات الأدوات الأربعة: أعلى ، ويمين ، وأسفل ، ويسار. يتم عكس الاتجاهات عند استخدام Bootstrap في RTL.

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

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

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

باستخدام SVG:

ساس

المتغيرات

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    0;

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
$tooltip-arrow-color:               $tooltip-bg;

إستعمال

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

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

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

وضع علامة على

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

<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

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

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

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-bs-، كما في data-bs-animation="". تأكد من تغيير نوع حالة اسم الخيار من camelCase إلى kebab-case عند تمرير الخيارات عبر سمات البيانات. على سبيل المثال ، بدلاً من استخدام data-bs-customClass="beautifier"، استخدم data-bs-custom-class="beautifier".

استخدام وظيفة معpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

طُرق

تبين

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

tooltip.show()

يخفي

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

tooltip.hide()

تبديل

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

tooltip.toggle()

تخلص

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

tooltip.dispose()

يُمكَِن

يمنح تلميح أداة عنصر القدرة على الظهور. يتم تمكين تلميحات الأدوات بشكل افتراضي.

tooltip.enable()

تعطيل

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

tooltip.disable()

toggleEnabled

لتبديل إمكانية إظهار تلميح أداة عنصر ما أو إخفاؤه.

tooltip.toggleEnabled()

تحديث

يحدّث موضع تلميح أداة العنصر.

tooltip.update()

getInstance

طريقة ثابتة تسمح لك بالحصول على مثيل تلميح الأداة المرتبط بعنصر DOM

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

getOrCreateInstance

طريقة ثابتة تتيح لك ربط مثيل تلميح الأدوات بعنصر DOM ، أو إنشاء مثيل جديد في حالة عدم تهيئته

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance

الأحداث

var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
  // do something...
})

tooltip.hide()