back to the lesson

Show a note near the element

importance: 5

Create a function positionAt(anchor, position, elem) that positions elem, depending on position either at the top ("top"), right ("right") or bottom ("bottom") of the element anchor.

Call it inside the function showNote(anchor, position, html) that shows an element with the class "note" and the text html at the given position near the anchor.

Show the notes like here:

P.S. The note should have position:fixed for this task.

Open a sandbox for the task.

In this task we only need to accurately calculate the coordinates. See the code for details.

Please note: the elements must be in the document to read offsetHeight and other properties. A hidden (display:none) or out of the document element has no size.

Open the solution in a sandbox.