How to disable popover behaviour for an inner element

Question

I have a container with some details and a button inside it. and the container has popover behavior when we hover over it. the problem is I need to disable popover behavior while hovering over the button inside it. heres the fiddle Thanks in advance.

<div class="container">
  <p>name: </p>
  <p>age: </p>
  <p>department:</p>
  <button class="btn btn-primary">Connect</button>
</div>

$('.container').popover({
    trigger: "hover",
    content: "sample content"
})

score 1 · Answer 1 · answered Nov 28 '17 at 05:28

1

Add below codes into JavaScript block.

$('.container button').mouseover(function(e) {
    $('.container').popover('hide');
});

$('.container button').mouseout(function(e) {
    $('.container').popover('show');
});

answered Nov 28 '17 at 05:28

Lwin Htoo Ko

2,326
4
26
38

score 1 · Answer 2 · edited Dec 15 '17 at 03:29

1

You can do like this:

$('.container button').hover(function(){
    $('.container').popover('hide');
},function(){
  $('.container').popover('show');
});

Fiddle: https://jsfiddle.net/fwcrt2hy/

edited Dec 15 '17 at 03:29

Bhargav Rao

50,140
28
121
140

answered Nov 28 '17 at 05:36

Ajay Thakur

1,066
7
23

score 0 · Answer 3 · answered Nov 28 '17 at 05:24

0

I suggest...

$('.container p').popover({
    trigger: "hover",
    content: "sample content"
});

(i.e. changing the selector to .container p) because the only content in your .container besides the <button> is paragraph (<p>) elements.

Possible Drawbacks

If your .container has padding, the padding area will not trigger the popover behavior.

answered Nov 28 '17 at 05:24

Drew Wills

8,408
4
29
40

Yes, I have tried that but the issue is that I'm using this in multiple places with different layouts so I need to use 'container' as the selector. – Vivekraj K R Nov 28 '17 at 05:27

score 0 · Answer 4 · answered Nov 28 '17 at 06:18

You can use selector option within popover() method. If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added.

$(function () {
    $('.container').popover({
        trigger: "hover",
        content: "sample content",
        selector: 'p'    //added this line
    })
});

Source: https://getbootstrap.com/docs/4.0/components/popovers/#options

How to disable popover behaviour for an inner element

4 Answers4

Possible Drawbacks