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.

Use it to make a 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 accuracely calculate the coorindates. 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.