Odo Hotspots

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.

Markup

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.

Positioning

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>

  <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>

  <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>

  <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>
  </div>
</div>

Setup

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.

hotspots.refresh();

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.
  data.preventDefault();

  // 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.