Hotspot Map - Powerful Annotations and Tooltips

Hotspot Map - Powerful Annotations and Tooltips

Hotspot is a plugin for easily adding annotations, text, or other stuff to an image, on the exact locations that you want. It’s an old concept with one exception. It comes with a powerful editor for precise drawing and positioning of the spots. You can also edit settings, see a preview of the final result and the editor will generate the HTML and JS code for you!


One of the most powerful features of this plugin is the editor that it comes with. You don’t need to manually specify coordinates and dimensions of each spot on the image. It’s all visual – click to add a spot, or click and drag to draw a rectangle. Then dial the settings, click “Generate” and you will see a preview of the final result!

Different kinds of spots

Using the editor you can create four different types of spots – a simple circular “spot” with fixed width and height, a rectangular one for which you choose the dimensions, or an invisible version of each one.

Popup boxes

This plugin is built from the ground up with flexibility in mind. For each individual popup box you can specify a fixed or fluid width, and a position of the box – top, bottom, left or right. All this gives you a lot of flexibility to build exactly what you need!

Change Log

1.1.4 – May 8, 2015

  • Minor bug fix in the editor.

1.1.3 – Feb 21, 2015

  • All elements of the map are now “box-sizing: content-box;”

1.1.2 – Feb 20, 2015

  • Updated documentation
  • Minor bug fixes in the Editor.

1.1.1 – Feb 11, 2015

  • Added browser prefixes for some transitions.

1.1.0 – Feb 10, 2015

  • Added an option to choose a color for the rectangle and circle spots.
  • Added CSS3 transitions to the mouseover state of the spots.


  • Demo is now working.


  • Better support for IE8 and IE9.
  • Added a CSS style for links in the popup boxes.


  • Adjusted CSS for the content in the popups.
  • Editor: now working for Safari and Chrome.
  • Editor: added icons for the move and scale handles.