jquery - Bootstrap popover does not show - Stack Overflow

admin管理员组

文章数量:1122846

I am trying to use a BS popover, my first time. I need to use the same popover for multiple elements so content and title will be dynamic. I googled and viewed a bunch of suggestions and still can't get this to work. I can see when element (a Fontawsome icon) is clicked, the appropriate function is called to fetch the title and content, but having problems with the popover.

<label>
  Some Text
  <span>
    <i
      class='fas fa-question-circle descPopover'
      aria-hidden='true'
      data-bs-toggle='popover'
      data-bs-placement='top'
      data-bs-trigger="focus"
      data-html="true"
      data-content="<div id='descContainer'>Loading...</div>"
      title="Click for more info"
      onclick="showDescr('vpc')"
    ></i>
  </span>
</label>

<label>
  Some Other Text
  <span>
    <i
      class='fas fa-question-circle descPopover'
      aria-hidden='true'
      data-bs-toggle='popover'
      data-bs-placement='top'
      data-bs-trigger="focus"
      data-html="true"
      data-content="<div id='descContainer'>Loading...</div>"
      title="Click for more info"
      onclick="showDescr('vpc')"
    ></i>
  </span>
</label>

function showDescr(code) {
    var descr = 'some description fecthed from an array';
    var heading = 'some title fecthed from an array';
    $('.descPopover').data("title", heading);
    $('.descPopover').data("content", descr);
    $('.descPopover').popover('show');
}

$(document).ready(function () {
    $('[data-bs-toggle="popover"]').popover();  
        
    $('.descPopover').on('show.bs.popover', function (e) {
        var popover = $(this);
        var content = popover.data('content');
        var title = popover.data('title');
        $('#descContainer').html(content);
    });
    // ...
});

When the question mark icon is clicked, it shows a popover, with two titles, presumably one for each label, one above the other, ("Click for more info") and the text "Loading ..." and no way to close it.

I put a breakpoing on showDesc() and can see it gets called but on('show.bs.popover') doesn't.

I am trying to use a BS popover, my first time. I need to use the same popover for multiple elements so content and title will be dynamic. I googled and viewed a bunch of suggestions and still can't get this to work. I can see when element (a Fontawsome icon) is clicked, the appropriate function is called to fetch the title and content, but having problems with the popover.

<label>
  Some Text
  <span>
    <i
      class='fas fa-question-circle descPopover'
      aria-hidden='true'
      data-bs-toggle='popover'
      data-bs-placement='top'
      data-bs-trigger="focus"
      data-html="true"
      data-content="<div id='descContainer'>Loading...</div>"
      title="Click for more info"
      onclick="showDescr('vpc')"
    ></i>
  </span>
</label>

<label>
  Some Other Text
  <span>
    <i
      class='fas fa-question-circle descPopover'
      aria-hidden='true'
      data-bs-toggle='popover'
      data-bs-placement='top'
      data-bs-trigger="focus"
      data-html="true"
      data-content="<div id='descContainer'>Loading...</div>"
      title="Click for more info"
      onclick="showDescr('vpc')"
    ></i>
  </span>
</label>

function showDescr(code) {
    var descr = 'some description fecthed from an array';
    var heading = 'some title fecthed from an array';
    $('.descPopover').data("title", heading);
    $('.descPopover').data("content", descr);
    $('.descPopover').popover('show');
}

$(document).ready(function () {
    $('[data-bs-toggle="popover"]').popover();  
        
    $('.descPopover').on('show.bs.popover', function (e) {
        var popover = $(this);
        var content = popover.data('content');
        var title = popover.data('title');
        $('#descContainer').html(content);
    });
    // ...
});

When the question mark icon is clicked, it shows a popover, with two titles, presumably one for each label, one above the other, ("Click for more info") and the text "Loading ..." and no way to close it.

I put a breakpoing on showDesc() and can see it gets called but on('show.bs.popover') doesn't.

• jquery
• bootstrap-popover

Share Improve this question Follow edited Nov 21, 2024 at 23:07 Kostas Minaidis 5,19733 gold badges1919 silver badges2929 bronze badges asked Nov 21, 2024 at 22:55 NoBullManNoBullMan 2,17666 gold badges5050 silver badges106106 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Even though it's not quite clear, what your final goal is, here's a simple setup that will make both popovers work with the dynamic content:

<label>
  Some Text
  <span>
    <i
      class='fas fa-question-circle descPopover'
      tabindex="0"
      aria-hidden='true'
      data-bs-toggle='popover'
      data-bs-placement='top'
      data-bs-trigger="focus"
      data-html="true"
      data-content="<div id='descContainer'>Loading...</div>"
      title="Click for more info"
      onclick="showDescr('vpc', this)"
    ></i>
  </span>
</label>

<label>
  Some Other Text
  <span>
    <i
      class='fas fa-question-circle descPopover'
      tabindex="0"
      aria-hidden='true'
      data-bs-toggle='popover'
      data-bs-placement='top'
      data-bs-trigger="focus"
      data-html="true"
      data-content="<div id='descContainer'>Loading...</div>"
      title="Click for more info"
      onclick="showDescr('vpc', this)"
    ></i>
  </span>
</label>

  function showDescr(code, el) {
    var descr = 'some description fecthed from an array';
    var heading = 'some title fecthed from an array';
    $(el).attr("data-bs-title", heading);
    $(el).attr("data-bs-content", descr);
    $(el).popover('toggle');
  }
  $("[data-bs-trigger='focus']").on("blur", e =>{
    $(e.target).popover("hide");
  })

function showDescr(code, el) {
    var descr = 'some description fecthed from an array ' + Math.random().toFixed(2);
    var heading = 'some title fecthed from an array '  + Math.random().toFixed(2);
    $(el).attr("data-bs-title", heading);
    $(el).attr("data-bs-content", descr);
    $(el).popover('toggle');
  }
 $("[data-bs-trigger='focus']").on("blur", e =>{
    $(e.target).popover("hide");
  })

<script
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
  crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<label>
  Some Text
  <span>
    <i
      class='fas fa-question-circle descPopover'
      tabindex="0"
      aria-hidden='true'
      data-bs-toggle='popover'
      data-bs-placement='top'
      data-bs-trigger="focus"
      data-html="true"
      data-content="<div id='descContainer'>Loading...</div>"
      title="Click for more info"
      onclick="showDescr('vpc', this)"
    ></i>
  </span>
</label>

<label>
  Some Other Text
  <span>
    <i
      class='fas fa-question-circle descPopover'
      tabindex="0"
      aria-hidden='true'
      data-bs-toggle='popover'
      data-bs-placement='top'
      data-bs-trigger="focus"
      data-html="true"
      data-content="<div id='descContainer'>Loading...</div>"
      title="Click for more info"
      onclick="showDescr('vpc', this)"
    ></i>
  </span>
</label>

As you see, I am passing a second argument to the onclick handler, so that for each element, the handler has access to the element that triggered the call.

showDescr('vpc') => showDescr('vpc', this)

I have also switched to $().attr to make this work, along with switching over to toggle instead of show so that the handler automatically hides/shows the element. Otherwise, you'll get a flickering issue, when the code tries to show an already open popover.

I've also included a working demo. Open and try the snippet.

Update: in order for the popover to toggle on 'blur' (while the user clicks on another part of the DOM), I've added a required tabindex on the 2 elements and an onblur handler to hide the popovers.

本文标签： jqueryBootstrap popover does not showStack Overflow