レッスンに戻る

改善されたツールチップ動作

重要性: 5

属性 data-tooltip を持つ要素にツールチップを表示する JavaScript を書いてください。

それは、タスク ツールチップの振る舞い と似ていますが、ここでは注釈付き要素はネストできます。最も深くネストしたツールチップが表示されます。

例えば:

<div data-tooltip="Here – is the house interior" id="house">
  <div data-tooltip="Here – is the roof" id="roof"></div>
  ...
  <a href="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3Bhttps%3A%2F%2Fen.wikipedia.org%2Fwiki%2FThe_Three_Little_Pigs%26quot%3B%2520data-tooltip%3D%26quot%3BRead%2520on%25E2%2580%25A6%26quot%3B%26gt%3BHover%2520over%2520me%26lt%3B%2Fa%26gt%3B%26lt%3B%2Fdiv%26gt%3B%253C%2Fcode">

iframe での結果です:

P.S. ヒント: 同時に1つのツールチップだけ表示します。

タスクのためのサンドボックスを開く