Hotspots

<!-- Hotspots style 1 with popover on hover -->
<div class="hotspots" style="max-width: 650px;">

  <!-- Underlying image -->
  <img src="assets/img/landing/product/hotspots-image.png" class="d-block" alt="Image">

  <!-- Hotspot -->
  <div class="hotspot" style="top: 8%; right: 16%;" data-bs-toggle="popover" data-bs-trigger="hover" title="Memory foam ear pads" data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.">
    <div class="hotspot-inner">
      <i class="ai-plus"></i>
    </div>
  </div>

  <!-- Hotspot -->
  <div class="hotspot" style="bottom: 9%; left: 48%;" data-bs-toggle="popover" data-bs-trigger="hover" title="Noise suppression" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare.">
    <div class="hotspot-inner">
      <i class="ai-plus"></i>
    </div>
  </div>

  <!-- Hotspot -->
  <div class="hotspot" style="bottom: 36%; left: 6%;" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" title="Wireless Bluetooth" data-bs-content="Excepteur sint occaecat cupidatat non proident sunt culpa officia.">
    <div class="hotspot-inner">
      <i class="ai-plus"></i>
    </div>
  </div>
</div>

<!-- Hotspots style 2 with popover on focus -->
<div class="hotspots hotspots-alt">

  <!-- Underlying image -->
  <img src="assets/img/landing/shop/gallery/01.jpg" class="d-block rounded-1" alt="Image">

  <!-- Hotspot -->
  <a class="hotspot" style="top: 20%; left: 27%;" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" data-bs-html="true" data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Bronze floor<br>led lamp</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$185.00</span>' aria-label="Hotspot">
    <div class="hotspot-inner"></div>
  </a>

  <!-- Hotspot -->
  <a class="hotspot" style="top: 14.7%; right: 32.7%;" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" data-bs-html="true" data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Photo frame<br>Defacto</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$21.00</span>' aria-label="Hotspot">
    <div class="hotspot-inner"></div>
  </a>

  <!-- Hotspot -->
  <a class="hotspot" style="bottom: 41%; left: 34.6%;" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" data-bs-html="true" data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Yellow satin<br>armchair</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$276.00</span>' aria-label="Hotspot">
    <div class="hotspot-inner"></div>
  </a>

  <!-- Hotspot -->
  <a class="hotspot" style="bottom: 24.3%; right: 27.5%;" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" data-bs-html='true' data-bs-content='<a href="#" class="d-flex text-decoration-none mb-2"><span class="h6 fs-sm mb-0">Gary concrete<br>table stand</span><i class="ai-chevron-right fs-xl text-dark ms-2"></i></a><span>$35.00</span>' aria-label="Hotspot">
    <div class="hotspot-inner"></div>
  </a>
</div>