돌아가기
이 글은 다음 언어로만 작성되어 있습니다. English, Español, 日本語, Русский, 简体中文. 한국어 번역에 참여해주세요.

Tooltip behavior

중요도: 5

Create JS-code for the tooltip behavior.

When a mouse comes over an element with data-tooltip, the tooltip should appear over it, and when it’s gone then hide.

An example of annotated HTML:

<button data-tooltip="the tooltip is longer than the element">Short button</button>
<button data-tooltip="HTML<br>tooltip">One more button</button>

Should work like this:

In this task we assume that all elements with data-tooltip have only text inside. No nested tags (yet).

Details:

  • The distance between the element and the tooltip should be 5px.
  • The tooltip should be centered relative to the element, if possible.
  • The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there’s no space for the tooltip, then below it.
  • The tooltip content is given in the data-tooltip attribute. It can be arbitrary HTML.

You’ll need two events here:

  • mouseover triggers when a pointer comes over an element.
  • mouseout triggers when a pointer leaves an element.

Please use event delegation: set up two handlers on document to track all “overs” and “outs” from elements with data-tooltip and manage tooltips from there.

After the behavior is implemented, even people unfamiliar with JavaScript can add annotated elements.

P.S. Only one tooltip may show up at a time.

샌드박스를 열어 정답을 작성해보세요.