Bootstrap tooltip focus hatası

25-08-2024, 12:59:36

Arkadaşlar merhaba swiperjs ile bootstrap kullanımında tooltip tetiklemelerinden focus çalışmıyor sebebi ne olabilir.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
  <!-- Swiper -->
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><i class="bi bi-1-circle-fill" data-bs-title="Demo" data-bs-toggle="tooltip" data-bs-trigger="focus hover" tabindex="0"></i> Slide 1</div>
      <div class="swiper-slide"><i class="bi bi-1-circle-fill" data-bs-title="Demo" data-bs-toggle="tooltip" data-bs-trigger="focus hover" tabindex="0"></i> Slide 2</div>
    </div>
    <div class="swiper-scrollbar"></div>
  </div>
  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <!-- Swiper JS -->
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
  </script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      scrollbar: {
        el: ".swiper-scrollbar",
        hide: true,
      },
    });
  </script>
  </body>
</html>

25-08-2024, 13:07:16

#2

Lourity

Swiper kendi elemanları için yüksek z-index kullanıyor olabilir, tooltip'in z-index'ini arttırmayı deneyebilirsiniz.

25-08-2024, 13:15:02

#3

waptayiz

Lourity adlı üyeden alıntı: mesajı görüntüle

Swiper kendi elemanları için yüksek z-index kullanıyor olabilir, tooltip'in z-index'ini arttırmayı deneyebilirsiniz.

Tetikleme kısmında hover ve click çalışıyor ama sadece focus tetiklemesi calismiyor.

25-08-2024, 13:32:14

#4

Lourity

Focus olayını javascript ile zorlamayı deneyelim bakalım:

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
el.addEventListener('click', function() {
this.focus();
});
});

25-08-2024, 13:48:02

#5

waptayiz

Lourity adlı üyeden alıntı: mesajı görüntüle

Focus olayını javascript ile zorlamayı deneyelim bakalım:

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
el.addEventListener('click', function() {
this.focus();
});
});

bu şekilde çalıştı. Sorun tam olarak ne oluyor bu durumda

25-08-2024, 13:53:53

#6

Lourity

Swiper ve Bootstrap arasındaki çakışmalar focus olayının doğru şekilde tetiklenmesini engelliyor. Hover ve diğer olayların çalışıp focus'un çalışmamasının sebebi ise; focus'un diğerlerine göre daha karmaşık olması ve Swiper ile daha fazla etkileşime girmesidir. Hover ve click gibi olaylar ise daha basit yapıda olduklarından, bu etkileşimlerden daha az etkilenip sorunsuz çalışabilmektedir.

25-08-2024, 22:45:59

#7

waptayiz

Arkadaşlar swiperjs websitenizdeki tasarımla çakışmamak için focus özelliği pasif konuma alıyor. Bunun çözümü ise swiper ayar dosyaniza "focusableElements" kısmını ekleyip hangi elementte focus özelliğini kullanmak istiyorsanız etiket olarak belirtmek.
Ben "i" etiketi için kullanmak istemiştim. O yüzden js dosyamda şu şekil ayarlama yapıp sorunu çözüme kavusturdum.

focusableElements: "i"

Daha fazla etiket ekleyebilirsiniz

focusableElements: "div, input" gibi