Image Map Hot Spot

The hot spot is a small rectangle or circle which can be placed over an image to provide more info.
When a hot spot is hovered - or tapped on touch devices - an animated tooltip appears. The content can be an image with alt text and optional caption or text.
Hot Spot
The marker size should be a minimum of 32px for use on the mobile version of the site or if the full site page will be viewed on tablet devices. The default shape is square and there is a check box to make it round.
The marker can be styled for background color and opacity and border width and color.
Tooltip Content
The tooltip can have either an image with an optional caption or text content.
The text can use a web safe font or a non web safe or Google hosted font with web safe fallback. There are controls for font size, color, background color, line height and text align.
NOTE: The text content is entered into javascript so the use the apostrophe should be avoided or the code will break. If it must be used, preceed it with a backslash.
Tooltip Styles
The tooltip has controls for setting the width, border width and color, the animation type and the delay in milliseconds before the animation takes place.
The animatio types are fade, grow, swing, slide, fall.