CODEWITHSUNDEEP
javascriptjquerybootstrap-4bootstrap-popover
Vivekraj K R
Vivekraj K R

Reputation: 2558

How to disable popover behaviour for an inner element

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"
})

Upvotes: 0

Views: 1371

Answers (4)

Ajay Thakur
Ajay Thakur

Reputation: 1072

You can do like this:

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

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

Upvotes: 1

Rohit Sharma
Rohit Sharma

Reputation: 3334

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

Upvotes: 0

Lwin Htoo Ko
Lwin Htoo Ko

Reputation: 2406

Add below codes into JavaScript block.

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

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

Upvotes: 1

Drew Wills
Drew Wills

Reputation: 8446

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.

Upvotes: 0

Related Questions