Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to prevent the popover div for hiding on clicking inside it for twitter bootstrap "dismissible popover"(data-trigger="focus")?

I have a a dismissible popover(data-trigger="focus") with a text box inside it. But as soon as I click inside the text box to type it dissappear because of the "data-trigger="focus". How do I make the div intelligently not disappear on click inside it? Here is my html :

  <head><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></head>
<body><div><a class="BookAppButton" href="" data-toggle="popover" data-html="true" data-placement="bottom" data-trigger="focus">Click Here</a></div></body>

Here is my jquery :

    $(document).ready(function(){
$('.BookAppButton').click(function(event){
    event.preventDefault();
    console.log("Button Clicked..");
});
$('.BookAppButton').popover({
        title : '',
        html : 'true',
    content:'<div style="border:black 2px solid"><p>Enter name : <input type="text"></input></p></div>'
    });
});

This is my jsfiddle link : http://jsfiddle.net/3g3o4xhw/

I am at my wits end.. please help.. Thanks in advance.

like image 887
Rohit Rane Avatar asked Dec 25 '14 15:12

Rohit Rane


People also ask

How do I use popovers in bootstrap?

To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.

How do I show popover in bootstrap 5?

To create a popover, add the data-bs-toggle="popover" attribute to an element. Note: Popovers must be initialized with JavaScript to work.

How do I change the popover position in bootstrap?

Positioning with Margins So to move the popover more to the left, we can add a negative margin-left, or a positive one to move it further to the right. Likewise, we can move the popover more up by adding a negative margin-top, and down by using a positive value.

How do I show popover on hover?

Set the trigger option of the popover to hover instead of click , which is the default one. Or with an initialization option: $("#popover"). popover({ trigger: "hover" });


2 Answers

Clicks on the popover are hiding that popover because they are stealing the browser's focus. As soon as the button loses focus, the popover will be hidden (because we've set data-trigger="focus").

To address exact question you asked:

prevent the popover div for hiding on clicking inside it for twitter bootstrap “dismissible popover”(data-trigger=“focus”)?

The simplest way to fix this is to prevent clicks inside the popover from stealing focus by:

  • Adding an event listener to catch clicks inside the popover
  • Calling preventDefault() on the caught event

This will stop the focus from being stolen, and so stop the popover from being closed.

Note: We need to add the event listener on mousedown rather than click, because that is when the focus is set by the browser.

A more in-depth explanation of why we use mousedown and preventDefault() can be found on this StackOverflow answer: Prevent firing focus event when clicking on div

$(function() {
  $('[data-toggle="popover"]').popover()
})

$('body')
  .on('mousedown', '.popover', function(e) {
    console.log("clicked inside popover")
    e.preventDefault()
  });
<html>

<body>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <a tabindex="0" class="btn btn-danger" data-toggle="popover" data-trigger="focus" title="Dismissible" data-content="Clicks in here won't steal focus">
    Dismissible popover
  </a>
</body>
</html>
like image 56
samjewell Avatar answered Oct 19 '22 07:10

samjewell


This code works for me, you can dismiss the popover upon any condition by calling preventDefault() method.

var closePopOver=true;
    $('[data-toggle="popover"]').popover({
        html: true,
        title: '',
        content: function () {
            return 'Your Html Here';
        }
    }).on('hide.bs.popover', function (hideEvent) {
        if (!closePopOver) {
            hideEvent.preventDefault();
        }
    });
like image 43
Mahmoud-Abdelslam Avatar answered Oct 19 '22 07:10

Mahmoud-Abdelslam