요약
<howto-tooltip>
는 요소가 키보드 포커스를 받거나 마우스가 요소 위로 가져갈 때 요소와 관련된 정보를 표시하는 팝업입니다.
도움말을 트리거하는 요소는 aria-describedby
를 사용하여 도움말 요소를 참조합니다.
도움말 자체에 포커스를 설정할 수 없으므로 요소는 tooltip
역할을 자체 적용하고 tabindex
를 -1로 설정합니다.
참조
데모
사용 예
<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 참조를 바인딩해야 하므로 한 번만 바인딩합니다.
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);