ツールチップの動作のためのJSコードを作成します。

マウスがdata-tooltipを持つ要素の上に来たら、その上にツールチップが表示され、マウスが離れるとツールチップが隠れます。

注釈付きHTMLの例

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

このような動作をします

このタスクでは、data-tooltipを持つすべての要素の中にはテキストのみが入っていると想定しています。ネストされたタグはありません（まだ）。

詳細

• 要素とツールチップの間の距離は5pxにする必要があります。
• 可能であれば、ツールチップは要素の中央に配置する必要があります。
• ツールチップはウィンドウの端を超えてはいけません。通常は要素の上に表示されますが、要素がページの上部にあり、ツールチップを表示するスペースがない場合は、その下に表示されます。
• ツールチップの内容はdata-tooltip属性で指定されます。任意のHTMLにすることができます。

ここで2つのイベントが必要になります

• mouseoverはポインタが要素の上に来たときにトリガーされます。
• mouseoutはポインタが要素を出たときにトリガーされます。

イベント委譲を使用してください。documentに2つのハンドラーを設定して、data-tooltipを持つ要素からのすべての「オーバー」と「アウト」を追跡し、そこからツールチップを管理します。

この動作が実装されると、JavaScriptに詳しくない人でも注釈付き要素を追加できるようになります。

P.S. 一度に表示できるツールチップは1つだけです。

タスク用のサンドボックスを開きます。