HowTo कॉम्पोनेंट – कैसे करें-टूलटिप

खास जानकारी

<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 में डालने पर ट्रिगर होता है. शुरुआती भूमिका, tabindex, इंटरनल स्टेटस, और इवेंट लिसनर को इंस्टॉल करने के लिए, यह एक अच्छी जगह है.

  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);