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

Ewa Gasperowicz

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 chuột di chuột qua phần tử đó. Phần tử kích hoạt chú giải công cụ sẽ tham chiếu đến phần tử chú giải công cụ với aria-describedby.

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

Tài liệu tham khảo

• Hướng dẫn: Các thành phần trên GitHub
• Mẫu chú giải công cụ trong Phương pháp ghi nhận tác giả ARIA 1.1

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 có hoạt động 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 nơi và luôn cần liên kết chính xác tham chiếu này, vì vậy hãy thực hiện một lần.

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

connectedCallback() sẽ kích hoạt khi phần tử được chèn vào DOM. Bạn nên đặt vai trò ban đầu, chỉ mục thẻ, trạng thái nội bộ và trình nghe sự kiện cài đặt.

  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ụ có aria-describedby.

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

Chú giải công cụ cần nghe các sự kiện tập trung/làm mờ từ mục tiêu, cũng như các sự kiện di chuột trên 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ý 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 kể cả khi không có chú giải công cụ để 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);