Odo Hotspots

Positions and opens hotspots.


IE9+ with polyfill.

To support IE<=11, you will need to add a classList polyfill.




This component has required css - css/odo-hotspots.css. The theme (css/odo-hotspots-theme.css should also be included and customized to your design).

Basic Hotspots

A hotspot contains a “button” and “content,” which both reside within a “wrapper.” You can put anything you want inside the hotspot content element. If you do not give the hotspot wrapper (odo-hotspot) a position class, it will position the content for you.

A Placeholder image
Look, kittens!
Intently stare at the same spot rub face on everything, or nap all day. Make muffins all of a sudden cat goes crazy. Chew foot cat snacks throwup on your pillow leave hair everywhere, so sleep nap inspect anything brought into the house find something else more interesting.
Look, kittens!
Chase dog then run away. Rub face on everything have secret plans, so hunt by meowing loudly at 5am next to human slave food dispenser. Hunt anything that moves roll on the floor purring your whiskers off or chew foot hunt by meowing loudly at 5am next to human slave food dispenser or mark territory.
Look, kittens!
Chew iPad power cord leave dead animals as gifts stare at ceiling, or intrigued by the shower. Missing until dinner time swat at dog why must they do that behind the couch, for shove bum in owner's face like camera lens and lick arm hair. Swat at dog chew iPad power cord, or kick up litter.
Look, kittens!
Present belly, scratch hand when stroked jump off balcony, onto stranger's head for why must they do that, but find empty spot in cupboard and sleep all day, and intently stare at the same spot, or hack up furballs.



Any class name that starts with odo-hotspot is required except the button icon.

The Wrapper

It needs a data-position attribute to represent the x and y coordinates of the hotspot. It will be positioned with top and left properties as a percentage. So data-position="10,20" will result in style="left:10%;top:20%;. This is also the element to receive the is-open class when showing a hotspot.

The Button

The button is what's being clicked/tapped. It also contains the plus/close icon. This is optional. You may replace it with something more fitting to your project or keep it.

The Content

You may place anything you want inside the content element. It does not have to be a figure element.


In the example below, the first three hotspots do not have a position set on them. The hotspots class will see this and decide where to position the content. The last hotspot has both a side and an anchor defined (left|right and top|bottom, respectively). The hotspots class will not override these positions nor change them.

<div id="basic-hotspots" class="odo-hotspot__container">
  <div class="odo-hotspot" data-position="10,20">
    <button class="odo-hotspot__button" aria-label="Cat story 1"><span class="odo-hotspot__icon"></span></button>
    <figure class="odo-hotspot__content">…</figure>

  <div class="odo-hotspot" data-position="50,80">
    <button class="odo-hotspot__button" aria-label="Cat story 2"><span class="odo-hotspot__icon"></span></button>
    <figure class="odo-hotspot__content">…</figure>

  <div class="odo-hotspot" data-position="08,70">
    <button class="odo-hotspot__button" aria-label="Cat story 3"><span class="odo-hotspot__icon"></span></button>
    <figure class="odo-hotspot__content">…</figure>

  <div class="odo-hotspot odo-hotspot--left odo-hotspot--bottom" data-position="90,10">
    <button class="odo-hotspot__button" aria-label="Cat story 4"><span class="odo-hotspot__icon"></span></button>
    <figure class="odo-hotspot__content">…</figure>


var hotspots = new OdoHotspots(document.getElementById('basic-hotspots'));

Responsive Images

Be aware that the hotspot content's dimensions (width and height) are used in calculations. If you have a lazy-loaded image it is your responsibility to refresh the hotspots when that image loads. The Odo Hotspots binds an event listener to the window load event and triggers a refresh then.


Preventing Default Functionality

There are two events which OdoHotspots emits in which the default action can be prevented. When clicking on a hotspot, a WILL_OPEN event is emitted. If preventDefault is called on this event by a listener, the hotspot will not open. The second event is WILL_CLOSE, which, when prevented, stops the hotspot from closing.

hotspots.on(OdoHotspots.EventType.WILL_OPEN, function(data) {
  var hotspot = data.hotspot;

  // Prevent hotspot from opening.

  // Do custom thing.
}, false);

OdoHotspots does not do anything special for mobile layouts. You will likely want to dispose of the instance and do something completely different or prevent the hotspot from opening like above and show the content in a different manner.