javascript - Få Bootstrap Popover att dyka upp/försvinna vid hovring istället för klick

Jag bygger en webbplats med Bootstraps Popover och jag kan inte lista ut hur man får popovern att visas när man hovrar istället för när man klickar.

Allt jag vill göra är att få en popover att visas när någon hovrar över en länk istället för att klicka på den och att popovern försvinner när de flyttar bort. Dokumentationen säger att det är möjligt att använda antingen data-attributet eller jQuery. Jag skulle mycket hellre göra det med jQuery eftersom jag har flera popovers.

Svar #1

Ställ in alternativet trigger för popover på hover istället för click, som är standard.

Detta kan göras med antingen data-*-attribut i markeringen:

<a id="popover" data-trigger="hover">Popover</a>

Eller med ett initialiseringsalternativ:

$("#popover").popover({ trigger: "hover" });

Här är en DEMO.

Svar #2

Jag skulle vilja tillägga att för tillgänglighet, tycker jag att du bör lägga till fokusutlösare:

d.v.s. $ ("#popover").popover({ trigger: "hover focus" });

Svar #3

Om du också vill hålla muspekaren över popovern själv måste du använda en manuell utlösare.

Detta är vad jag kom på:

function enableThumbPopover() {
  var counter;

  $('.thumbcontainer').popover({
    trigger: 'manual',
    animation: false,
    html: true,
    title: function() {
      return $(this).parent().find('.thumbPopover > .title').html();
    },
    content: function() {
      return $(this).parent().find('.thumbPopover > .body').html();
    },
    container: 'body',
    placement: 'auto'
  }).on("mouseenter", function() {
    var _this = this; // thumbcontainer

    console.log('thumbcontainer mouseenter')
    // clear the counter
    clearTimeout(counter);
    // Close all other Popovers
    $('.thumbcontainer').not(_this).popover('hide');

    // start new timeout to show popover
    counter = setTimeout(function() {
      if ($(_this).is(':hover')) {
        $(_this).popover("show");
      }
      $(".popover").on("mouseleave", function() {
        $('.thumbcontainer').popover('hide');
      });
    }, 400);

  }).on("mouseleave", function() {
    var _this = this;

    setTimeout(function() {
      if (!$(".popover:hover").length) {
        if (!$(_this).is(':hover')) // change $(this) to $(_this) 
        {
          $(_this).popover('hide');
        }
      }
    }, 200);
  });
}

enableThumbPopover();
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email /dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email /dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<section class="thumbcontainer">
  <div class="thumbPopover">
    <strong class="title">Title</strong>
    <div class="body">
      Body with <i>HTML</i>
    </div>
  </div>
</section>

Relaterade artiklar