javascript - How can I make Twitter Bootstrap Popover that always be open? - Stack Overflow

admin管理员组

文章数量:1278653

I want to make Twitter Bootstrap Popover that when document loaded, be open for ever. i see some solution but they show popover by click or hover!

There is my code:

$("#min-allowed-price .bar-label-shape").popover({
    offset: 10,
    trigger:'manual'
    });

I want to make Twitter Bootstrap Popover that when document loaded, be open for ever. i see some solution but they show popover by click or hover!

There is my code:

$("#min-allowed-price .bar-label-shape").popover({
    offset: 10,
    trigger:'manual'
    });

• javascript
• twitter-bootstrap
• bootstrap-popover

Share Improve this question Follow edited Jul 14, 2016 at 11:06 MHS asked Jul 14, 2016 at 10:44 MHSMHS 93111 gold badge1414 silver badges3232 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

One way is to show popover manually and then remove the click event handler for the popover link.

$('.popover-visible-trigger')
    .popover('show')
    .off('click');

See the working jsfiddle.

The thing, though, is that maybe you don't need to do that. If you want the popover displayed at all times why not add it to markup?

I want to make Twitter Bootstrap Popover that when document loaded

$(document).ready(function() {
    $("button").popover("show");
});

be open for ever.

Add disabled attribute to button or preventDefault() on hide.bs.popover event

$('button').on('hide.bs.popover', function (e) {
  e.preventDefault();
});

jsfiddle

You're not actually triggering the popover. You can do that by calling popover('show'):

$("#min-allowed-price .bar-label-shape").popover({
  offset: 10,
  trigger:'manual'
}).popover('show');

From Bootstrap's Popover documentation:

.popover('show')

Reveals an element's popover. Returns to the caller before the popover has actually been shown (i.e. before the shown.bs.popover event occurs). This is considered a "manual" triggering of the popover. Popovers whose both title and content are zero-length are never displayed.

$('#element').popover('show')

Bootstrap 5 example for keeping popover always visible:

• on click

// initialize popovers
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => {
  // prevent hiding each popover
  popoverTriggerEl.addEventListener('hide.bs.popover', (event) => {
    event.preventDefault();
  });
  return new bootstrap.Popover(popoverTriggerEl);
});

<button type="button" class="btn btn-lg btn-danger mt-5 ms-5" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>


<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

• right away (show automatically as soon as it's initiated)

// initialize popovers
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => {
  // prevent hiding each popover
  popoverTriggerEl.addEventListener('hide.bs.popover', (event) => {
    event.preventDefault();
  });
  const popoverEl = new bootstrap.Popover(popoverTriggerEl);
  popoverEl.show();
  return popoverEl;
});

<button type="button" class="btn btn-lg btn-danger mt-5 ms-5" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>


<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

本文标签： javascriptHow can I make Twitter Bootstrap Popover that always be openStack Overflow