Responsive Sticky Notes

Screenshots

This plugin lets you add ‘sticky’ notes to any post or non-admin page. The notes are attached to HTML elements within the page, so are ideal for text annotations or to add extra information to images, etc., and will move with responsive layout changes so they never vanish off the edge of the screen. To add a note, click the ‘Add Sticky Note’ button in the top admin bar, then move the cursor over the page. As you move the cursor, page elements are highlighted with an outline. Click again to add a note at this position. Notes are attached to the beginning of a page element, i.e. at the top left corner of a <p>, <div>, etc. A note can be attached to anything on a page. Once you have added a note, click it to open it. Then type text as required – it is saved as you type. To move a note, click and drag it to another position on the page. If the note is open, click and drag from top, between the Close and Menu icons. The The page will scroll automatically when the note is close to an edge (you may need to move the cursor a little to get the page to scroll). To change the note color, delete the note, or go to the edit page, click the ‘menu’ icon in the top right corner. The note ‘tooltip’ is set to the first few words of the note, unless the note has a title. To set a title, open the note menu then click the … icon, to go to the note edit screen. If you delete a page element to which a note is attached, the note will ‘float’ to the top left of the window. This may also happen if you change an ID somewhere on the page. Floated notes can be dragged to any other page element, as normal.