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

Thats 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:

bn en sandbox til opgaven.