@odopod/odo-hotspots/test/fixtures/basic.html

A component which positions and opens hotspots.

<div class="odo-hotspot__container" style="width:1000px;height:500px;">

  <div class="odo-hotspot" data-position="15,0">
    <button class="odo-hotspot__button"><span class="odo-hotspot__icon"></span></button>
    <figure class="odo-hotspot__content">
      <img src="https://placekitten.com/g/300/169" alt="Look, kittens!">
      <figcaption>foo</figcaption>
    </figure>
  </div>

  <div class="odo-hotspot" data-position="55,75">
    <button class="odo-hotspot__button"><span class="odo-hotspot__icon"></span></button>
    <figure class="odo-hotspot__content">
      <img src="https://placekitten.com/g/400/225" alt="Look, kittens!">
      <figcaption>bar</figcaption>
    </figure>
  </div>

  <div class="odo-hotspot" data-position="10,56">
    <button class="odo-hotspot__button"><span class="odo-hotspot__icon"></span></button>
    <figure class="odo-hotspot__content">
      <img src="https://placekitten.com/g/500/281" alt="Look, kittens!">
      <figcaption>blarg</figcaption>
    </figure>
  </div>

  <div class="odo-hotspot odo-hotspot--left odo-hotspot--bottom" data-position="80,11">
    <button class="odo-hotspot__button"><span class="odo-hotspot__icon"></span></button>
    <figure class="odo-hotspot__content">
      <img src="https://placekitten.com/g/600/338" alt="Look, kittens!">
      <figcaption>honk</figcaption>
    </figure>
  </div>

</div>