Hotspots

<!-- Hotspots -->
<div id="hotspots-container-1" class="hotspots">

  <!-- Image -->
  <img src="path-to-image" alt="Image with hotspots"/>

  <!-- Hotspot -->
  <span class="hotspot" style="top: 56%; right: 34%;" data-bs-container="#hotspots-container-1" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Soft foam base" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem."></span>

  <!-- Hotspot -->
  <span class="hotspot" style="top: 15%; left: 40%;" data-bs-container="#hotspots-container-1" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover" title="Durable materials" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem."></span>

  <!-- Hotspot -->
  <span class="hotspot" style="top: 56%; left: 21%;" data-bs-container="#hotspots-container-1" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Top-notch ergonomics" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem."></span>
</div>

// Hotspots
#hotspots-container-1.hotspots

  // Image
  img(src="path-to-image", alt="Image with hotspots").rounded-3

  // Hotspot
  span(style="top: 56%; right: 34%;", data-bs-container="#hotspots-container-1", data-bs-toggle="popover", data-bs-placement="top", data-bs-trigger="hover", title="Soft foam base", data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.").hotspot

  // Hotspot
  span(style="top: 15%; left: 40%;", data-bs-container="#hotspots-container-1", data-bs-toggle="popover", data-bs-placement="bottom", data-bs-trigger="hover", title="Durable materials", data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.").hotspot

  // Hotspot
  span(style="top: 56%; left: 21%;", data-bs-container="#hotspots-container-1", data-bs-toggle="popover", data-bs-placement="top", data-bs-trigger="hover", title="Top-notch ergonomics", data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.").hotspot

<!-- Combine hotspots with color switcher -->
<div class="hotspots" id="hotspots-container-2">

  <!-- Image (radio) tabs -->
  <div class="radio-tab-pane active" id="pink" role="tabpanel">
    <img src="path-to-first-image" alt="Image"/>
  </div>
  <div class="radio-tab-pane" id="blue" role="tabpanel">
    <img src=".path-to-second-image" alt="Image"/>
  </div>
  <div class="radio-tab-pane" id="orange" role="tabpanel">
    <img src="path-to-third-image" alt="Image"/>
  </div>
  <div class="radio-tab-pane" id="green" role="tabpanel">
    <img src="path-to-fourth-image" alt="Image"/>
  </div>
  
  <!-- Hotspot -->
  <span class="hotspot" style="top: 58%; right: 50%;" data-bs-container="#hotspots-container-2" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Soft anti-slip grip" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem."></span>
  
  <!-- Hotspot -->
  <span class="hotspot" style="top: 22%; right: 38%;" data-bs-container="#hotspots-container-2" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Power button with 3 modes" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem."></span>
  
  <!-- Hotspot -->
  <span class="hotspot" style="top: 17%; right: 17%;" data-bs-container="#hotspots-container-2" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover" title="Interchangeable head" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem."></span>
  
  <!-- Hotspot -->
  <span class="hotspot" style="top: 77%; left: 8%;" data-bs-container="#hotspots-container-2" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Powerful Li-ion battery" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem."></span>
</div>

<!-- Color radio buttons -->
<div class="text-center pt-grid-gutter">
  <div class="d-inline-flex bg-light rounded py-2 px-3">

    <!-- Radio -->
    <div class="form-check form-option form-option-color form-check-inline mx-1">
      <input class="form-check-input" type="radio" name="color" id="c-pink" value="Pink" checked>
      <label class="form-option-label rounded-circle" for="c-pink" data-bs-toggle="radioTab" data-bs-target="#pink" data-bs-parent="#hotspots-container-2">
        <span class="form-option-color-indicator rounded-circle" style="background-color: #ff3dbe;"></span>
      </label>
    </div>

    <!-- Radio -->
    <div class="form-check form-option form-option-color form-check-inline mx-1">
      <input class="form-check-input" type="radio" name="color" id="c-blue" value="Blue">
      <label class="form-option-label rounded-circle" for="c-blue" data-bs-toggle="radioTab" data-bs-target="#blue" data-bs-parent="#hotspots-container-2">
        <span class="form-option-color-indicator rounded-circle" style="background-color: #00a1f0;"></span>
      </label>
    </div>

    <!-- Radio -->
    <div class="form-check form-option form-option-color form-check-inline mx-1">
      <input class="form-check-input" type="radio" name="color" id="c-orange" value="Orange">
      <label class="form-option-label rounded-circle" for="c-orange" data-bs-toggle="radioTab" data-bs-target="#orange" data-bs-parent="#hotspots-container-2">
        <span class="form-option-color-indicator rounded-circle" style="background-color: #fa6000;"></span>
      </label>
    </div>

    <!-- Radio -->
    <div class="form-check form-option form-option-color form-check-inline mx-1">
      <input class="form-check-input" type="radio" name="color" id="c-green" value="Green">
      <label class="form-option-label rounded-circle" for="c-green" data-bs-toggle="radioTab" data-bs-target="#green" data-bs-parent="#hotspots-container-2">
        <span class="form-option-color-indicator rounded-circle" style="background-color: #00b22c;"></span>
      </label>
    </div>
  </div>
</div>

// Combine hotspots with color switcher
#hotspots-container-2.hotspots

  // Image (radio) tabs
  #pink.radio-tab-pane.active(role="tabpanel")
    img(src="path-to-first-image", alt="Image")
  #blue.radio-tab-pane(role="tabpanel")
    img(src="path-to-second-image", alt="Image")
  #orange.radio-tab-pane(role="tabpanel")
    img(src="path-to-third-image", alt="Image")
  #green.radio-tab-pane(role="tabpanel")
    img(src="path-to-fourth-image", alt="Image")
  
  // Hotspot
  span(style="top: 58%; right: 50%;", data-bs-container="#hotspots-container-2", data-bs-toggle="popover", data-bs-placement="top", data-bs-trigger="hover", title="Soft anti-slip grip", data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.").hotspot

  // Hotspot
  span(style="top: 22%; right: 38%;", data-bs-container="#hotspots-container-2", data-bs-toggle="popover", data-bs-placement="top", data-bs-trigger="hover", title="Power button with 3 modes", data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.").hotspot

  // Hotspot
  span(style="top: 17%; right: 17%;", data-bs-container="#hotspots-container-2", data-bs-toggle="popover", data-bs-placement="bottom", data-bs-trigger="hover", title="Interchangeable head", data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.").hotspot

  // Hotspot
  span(style="top: 77%; left: 8%;", data-bs-container="#hotspots-container-2", data-bs-toggle="popover", data-bs-placement="top", data-bs-trigger="hover", title="Powerful Li-ion battery", data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus ornare sem.").hotspot

// Color radio buttons
.text-center.pt-grid-gutter
  .d-inline-flex.bg-light.rounded.py-2.px-3

    // Radio
    .form-check.form-option.form-option-color.form-check-inline.mx-1
      input(type="radio", name="color", id="c-pink", value="Pink", checked).
      label(for="c-pink", data-bs-toggle="radioTab", data-bs-target="#pink", data-bs-parent="#hotspots-container-2").form-option-label.rounded-circle
        span(style="background-color: #ff3dbe;").form-option-color-indicator.rounded-circle
    
    // Radio
    .form-check.form-option.form-option-color.form-check-inline.mx-1
      input(type="radio", name="color", id="c-blue", value="Blue")
      label(for="c-blue", data-bs-toggle="radioTab", data-bs-target="#blue", data-bs-parent="#hotspots-container-2").form-option-label.rounded-circle
        span(style="background-color: #00a1f0;").form-option-color-indicator.rounded-circle
    
    // Radio
    .form-check.form-option.form-option-color.form-check-inline.mx-1
      input(type="radio", name="color", id="c-orange", value="Orange")
      label(for="c-orange", data-bs-toggle="radioTab", data-bs-target="#orange", data-bs-parent="#hotspots-container-2").form-option-label.rounded-circle
        span(style="background-color: #fa6000;").form-option-color-indicator.rounded-circle

    // Radio
    .form-check.form-option.form-option-color.form-check-inline.mx-1
      input(type="radio", name="color", id="c-green", value="Green")
      label(for="c-green", data-bs-toggle="radioTab", data-bs-target="#green", data-bs-parent="#hotspots-container-2").form-option-label.rounded-circle
        span(style="background-color: #00b22c;").form-option-color-indicator.rounded-circle