← 返回首页
Improved tooltip behavior
EN

We want to make this open-source project available for people all around the world.

Help to translate the content of this tutorial to your language!

    Search
    Search
    Light themeDark theme
    عربيDanskEnglishEspañolفارسیFrançaisIndonesiaItaliano日本語한국어РусскийTürkçeУкраїнськаOʻzbek简体中文
    back to the lesson

    Improved tooltip behavior

    importance: 5

    Write JavaScript that shows a tooltip over an element with the attribute data-tooltip. The value of this attribute should become the tooltip text.

    That’s like the task Tooltip behavior, but here the annotated elements can be nested. The most deeply nested tooltip is shown.

    Only one tooltip may show up at the same time.

    For instance:

    <div data-tooltip="Here – is the house interior" id="house"> <div data-tooltip="Here – is the roof" id="roof"></div> ... <a href="https://en.wikipedia.org/wiki/The_Three_Little_Pigs" data-tooltip="Read on…">Hover over me</a> </div>

    The result in iframe:

    Open a sandbox for the task.

    solution