How can I dynamically disable popover from a DOM element?

Question

I have almost identical multiple divs on a page. They all have graphs inside I want some of them to have popovers when they are hovered.

I want to decide for each div if the popover is displayable or not. Is there a property that I can include inside options such as "diplay: false" ?

HTML

<div id="{{graph.id}}" data-ng-repeat="graph in graphs" data-placement="top" data-original-title="Parameters"></div>

JS

var options = {
    html: true,
    placement: 'top',
    trigger : 'hover',
    content: function() {
        return $('#info-chart-' + currentObj.id).html();
    }
}
$(currentObj.id).popover(options);

Why not use an empty hover function in those where you don't want to display. — Maverick, Nov 18 '15 at 08:32
@brainmassage how should we know which of your divs should have a popover and which dont?! do you know specific ids of divs that shouldnt have a popover? how to decide? — Alex, Nov 18 '15 at 08:33
You can also do something like if you don't want it to display then change the display property of popover to none on hover. — Maverick, Nov 18 '15 at 08:34
you just shouldnt call the function on those which shouldnt have a popover.. jeez — Alex, Nov 18 '15 at 08:35
@Alex I don't think he is calling popover though . He must be using bootstrap's default one. — Maverick, Nov 18 '15 at 08:38

Maverick · Accepted Answer · 2015-11-20T13:27:12.513

0

You can add some class to those elements on which you don't want popup like nopop class.

<div id="{{graph.id}}" class="nopop" data-ng-repeat="graph in graphs" data-placement="top" data-original-title="Parameters"></div>

Now change the jquery code.

$(currentObj.id).not(".nopop").popover(options);

You can check here --> JsFiddle

edited Nov 20 '15 at 13:27

answered Nov 20 '15 at 13:01

Maverick

961
9
13

How can I dynamically disable popover from a DOM element?

1 Answers1