Thành phần hướng dẫn – Hướng dẫn cách sử dụng

Ewa Gasperowicz
X
Rob Dodson
Surma

Tóm tắt

<howto-tooltip> là một cửa sổ bật lên hiển thị thông tin liên quan đến một phần tử khi phần tử đó nhận được tiêu điểm bàn phím hoặc khi chuột di qua phần tử đó. Phần tử kích hoạt chú giải công cụ tham chiếu đến phần tử chú giải công cụ bằng aria-describedby.

Phần tử này tự áp dụng vai trò tooltip và đặt tabindex thành -1, vì bản thân chú giải công cụ không bao giờ được lấy làm tâm điểm.

Tài liệu tham khảo

Bản minh hoạ

Xem bản minh hoạ trực tiếp trên GitHub

Ví dụ về cách sử dụng

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

Mã

class HowtoTooltip extends HTMLElement {

Hàm khởi tạo thực hiện công việc cần được thực thi chính xác một lần.

  constructor() {
    super();

Các hàm này được sử dụng ở nhiều vị trí và luôn cần liên kết đúng tham chiếu này, nên hãy thực hiện một lần.

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

connectedCallback() kích hoạt khi phần tử được chèn vào DOM. Đây là nơi thích hợp để đặt vai trò ban đầu, tabindex, trạng thái nội bộ và cài đặt trình nghe sự kiện.

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

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

    this._hide();

Phần tử kích hoạt chú giải công cụ tham chiếu đến phần tử chú giải công cụ bằng aria-describedby.

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

Chú giải công cụ cần theo dõi các sự kiện lấy nét/làm mờ từ mục tiêu, cũng như các sự kiện di chuột qua mục tiêu.

    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() huỷ đăng ký các trình nghe sự kiện được thiết lập trong connectedCallback().

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

Xoá các trình nghe hiện có để chúng không kích hoạt ngay cả khi không có chú giải công cụ nào hiển thị.

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