Hero: Single Image Tooltip Map With Height Smaller Than 700 Px With Link

<div class="hero--without-autoplay">
                              <div class="hero__container">
                                  <div class="swiper">
                                      <div class="swiper-wrapper">
                                          <div class="swiper-slide">

                                              <div class="hero__item-container ">
                                                  <div class="hero__overlay-container             ">
                                                      <div class="hero__overlay 
         
        ">
                                                          <div class="hero__logo
                                    ">
                                                              <div class="logos">
                                                                  <div class="image">
                                                                      <picture>
                                                                          <img class="image__img logos__brand--extra-large" alt="" title="" src="/example-assets/images/logos/brand-logo.png">
                                                                      </picture>
                                                                  </div>
                                                              </div>
                                                          </div>
                                                          <h3 class="hero__title">Bosch<br>E-Bike Motor</h3>
                                                          <div class="hero__content">Schnell und extrem leistungsfähig!</div>
                                                          <div class="hero__link">
                                                              <a href="#" class="button-icon--text-large">
                                                                  Call to Action
                                                              </a>
                                                          </div>
                                                      </div>
                                                  </div>
                                                  <div class="hero__background  ">
                                                      <div class="image ">
                                                          <picture class="taggd">
                                                              <img src="/example-assets/images/image-tooltip-map/equipment.jpg" class="image__img image-tooltip-map__img is-loading" alt="Image ToolTip from Hero" srcset="/example-assets/images/image-tooltip-map/equipment.jpg 1x, /example-assets/images/image-tooltip-map/equipment.jpg 2x" data-tooltip-info=[{&quot;top&quot;:30,&quot;left&quot;:62,&quot;data&quot;:[{&quot;name&quot;:&quot;Batterie&quot;,&quot;value&quot;:&quot;http://www.fuchs-movesa.ch&quot;}]},{&quot;top&quot;:70,&quot;left&quot;:67,&quot;data&quot;:[{&quot;name&quot;:&quot;Tachometer&quot;,&quot;value&quot;:&quot;http://www.fuchs-movesa.ch&quot;}]},{&quot;top&quot;:57,&quot;left&quot;:60,&quot;data&quot;:[{&quot;name&quot;:&quot;Motor&quot;,&quot;value&quot;:&quot;http://www.fuchs-movesa.ch&quot;}]}] onload="this.classList.remove('is-loading')" />
                                                          </picture>
                                                      </div>

                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                      <div class="hero__navigation-next"></div>
                                      <div class="hero__navigation-prev"></div>
                                      <div class="hero__pagination"></div>
                                  </div>
                              </div>
                          </div>