مكونات طريقة التنفيذ – تلميح بشأن الطريقة

ملخّص

<howto-tooltip> هو نافذة منبثقة تعرض معلومات ذات صلة بعنصر عندما يتلقّى العنصر تركيز لوحة المفاتيح أو عندما تمرّر مؤشر الماوس فوقه. يشير العنصر الذي يؤدي إلى تشغيل التلميح إلى عنصر التلميح باستخدام aria-describedby.

يطبّق العنصر الدور tooltip على نفسه ويضبط tabindex على -1، لأنّه لا يمكن التركيز على التلميح نفسه أبدًا.

مَراجع

عرض توضيحي

الاطّلاع على العرض المباشر على GitHub

مثال على الاستخدام

<div class="text">
<label for="name">Your name:</label>
<input id="name" aria-describedby="tp1"/>
<howto-tooltip id="tp1">Ideally your name is Batman</howto-tooltip>
<br>
<label for="cheese">Favourite type of cheese: </label>
<input id="cheese" aria-describedby="tp2"/>
<howto-tooltip id="tp2">Help I am trapped inside a tooltip message</howto-tooltip>

الرمز

class HowtoTooltip extends HTMLElement {

ينفِّذ المُنشئ عملًا يجب تنفيذه مرة واحدة فقط.

  constructor() {
    super();

يتم استخدام هذه الدوالّ في العديد من الأماكن، ويجب دائمًا ربط هذا المرجع الصحيح، لذا عليك إجراء ذلك مرة واحدة.

    this._show = this._show.bind(this);
    this._hide = this._hide.bind(this);
}

يتم تنشيط connectedCallback() عند إدراج العنصر في DOM. وهي مكان جيد لضبط الدور الأولي وفهرس علامات التبويب والحالة الداخلية وتثبيت أدوات معالجة الأحداث.

  connectedCallback() {
    if (!this.hasAttribute('role'))
      this.setAttribute('role', 'tooltip');

    if (!this.hasAttribute('tabindex'))
      this.setAttribute('tabindex', -1);

    this._hide();

يشير العنصر الذي يؤدي إلى تشغيل التلميح إلى عنصر التلميح مع aria-describedby.

    this._target = document.querySelector('[aria-describedby=' + this.id + ']');
    if (!this._target)
      return;

يجب أن تستمع التلميح إلى أحداث التركيز/التمويه من الهدف، بالإضافة إلى أحداث التمرير فوق الهدف.

    this._target.addEventListener('focus', this._show);
    this._target.addEventListener('blur', this._hide);
    this._target.addEventListener('mouseenter', this._show);
    this._target.addEventListener('mouseleave', this._hide);
  }

تلغي disconnectedCallback() تسجيل أدوات معالجة الأحداث التي تم إعدادها في connectedCallback().

  disconnectedCallback() {
    if (!this._target)
      return;

إزالة أدوات معالجة الأحداث الحالية، بحيث لا يتم تشغيلها على الرغم من عدم وجود تلميح لعرضها

    this._target.removeEventListener('focus', this._show);
    this._target.removeEventListener('blur', this._hide);
    this._target.removeEventListener('mouseenter', this._show);
    this._target.removeEventListener('mouseleave', this._hide);
    this._target = null;
  }

  _show() {
    this.hidden = false;
  }

  _hide() {
    this.hidden = true;
  }
}

customElements.define('howto-tooltip', HowtoTooltip);