How can I make Twitter Bootstrap Popover that always be open?

Question

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'
    });

score 4 · Accepted Answer · answered Jul 14 '16 at 11:13

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?

answered Jul 14 '16 at 11:13

dhorelik

1,477
11
14

Could you please more explain about it! what's markup? tnx – MHS Jul 14 '16 at 11:47
The thing is you can do that in a more efficient way without js. Bootstrap appends the popover block to the html, and this takes time to execute. So instead of relying on that, you can insert the popover code into your html yourself. See https://jsfiddle.net/5ejobu9q/2/, you can adjust the styling according to your needs. – dhorelik Jul 14 '16 at 12:12

score 3 · Answer 2 · answered Jul 14 '16 at 11:10

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

score 3 · Answer 3 · edited Jun 20 '20 at 09:12

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')

How can I make Twitter Bootstrap Popover that always be open?

3 Answers3

`.popover('show')`