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

前端未结

关注

 4  1363

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=

相关标签:

4条回答

刺人心

2021-02-20 07:12

You should use tigger: 'click'.

$('.BookAppButton').popover({
        title : '',
        html : 'true',
    trigger: 'click',
    content:'<div style="border:black 2px solid"><p>Enter name : <input type="text"></input></p></div>'
    });
});

0 讨论(0)

既然无缘

2021-02-20 07:15
Instead of
```
data-trigger="focus"
```
you should use
```
data-trigger="'focus'"
```
for AngularUI Bootstrap version 2.0 and above.
0 讨论(0)
发布评论:

提交评论
- 加载中...
孤城傲影

2021-02-20 07:23
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>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

慢半拍i

2021-02-20 07:29

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

0 讨论(0)