Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap popover.toggle() only show

I am trying to integrate a twitter bootstrap popover ; I am forced to use the javascript API, because some dynamic elements are loaded via Ajax and should react too.

Basically, here is a example tag that should react :

<a data-container="#appConfigDialog" data-toggle="popover" data-placement="top" 
   data-content="&lt;img src=&quot;URL&quot; /&gt;"
   data-html="true" href="#" 
   class="popoverFileSee btn btn-default">See</a>

URL is by the way replaced by the correct URL

And my JS :

$( document ).on( "click", ".popoverFileSee", function() {
    $( this ).popover( "toggle" );      
    return false;
});

Here is the behavior I would like to achieve :

  • When first click, the popover shows
  • When a click occurs for an opened popover, it should close it

Isn't it the aim of "toggle" ? Is there something wrong in this code sample, or should I check elsewhere in my application ?

Thanks

EDIT : For now, it always show the popover, even if it is already opened Weird thing : if I add alert( "test" ); in my callback function, then it works..

like image 705
Jérémy Dutheil Avatar asked Nov 14 '13 09:11

Jérémy Dutheil


People also ask

How to show popover inside a bootstrap modal?

Other case might be when popover is placed inside some other element and you want to show popover over that element, then you'll need to specify that element in data-container. ex: Suppose, we have popover inside a bootstrap modal with id as 'modal-two', then you'll need to set 'data-container' to 'modal-two'.

How a popover can be positioned on the page?

This article describes how a popover can be positioned on the page. The popover attribute of Bootstrap can be used to make the website look more dynamic. Popovers are generally used to display additional information about any element and are displayed on click of mouse pointer over that element. It is similar to the Bootstrap Tooltip.

What is a pop up box in Bootstrap?

JS Popover (popover.js) The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content. Plugin dependency: Popovers require the tooltip plugin (tooltip.js) to be included in your version of Bootstrap.

How do I create a popover in HTML?

Base HTML to use when creating the popover. The popover's title will be injected into the .popover-title. The popover's content will be injected into the .popover-content. .arrow will become the popover's arrow.


2 Answers

Remove the toggle from popover function without using click event like,

$(".popoverFileSee").popover();

Demo

Updated, If you need to add click event the after this you can add which is independent to popover like,

$(".popoverFileSee").popover();
$(".popoverFileSee").on('click',function(){
   // your ajax code here
});
like image 55
Rohan Kumar Avatar answered Sep 30 '22 11:09

Rohan Kumar


Finally found the answer myself.. ;) I simply had to add an attribute to my link : data-trigger="manual"

like image 45
Jérémy Dutheil Avatar answered Sep 30 '22 10:09

Jérémy Dutheil