testy.coolEvery arrow and label on this page is the library running live. No screenshots, no JavaScript.
neat-annotations is one CSS file,
8.5 KB, free to use, by Maxim Syabro. You wrap a word in a tag, give it a class
name and a data-note with the label text, and it draws this:
The class name is a compass direction. It says where the arrow points, so
ann-n sends the arrow up and parks the label underneath.
Six colours, and the highlighter mark can be turned off.
Flip the theme with the switch at the top right. Every colour has a light and a dark version.
Three things to know
The label takes up no space. This paragraph has a marked word in it, and the label for this one lands on the next line, on top of the text. The page lays out its lines as if the label were not there. That is why every other example on this page sits inside a panel with room around it.
A marked phrase is one solid box. When it wraps onto a second line, the arrow points at the whole block, not at a word.
a phrase this long wraps and the arrow loses its target
The handwriting font is yours to supply. The labels expect a font called Shantell Sans. Without it you get whatever the computer calls its cursive font, on the right.
without it
Last updated on