CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user1096557
user1096557

Reputation:

Set twitter bootstrap popover to hide after a certain event then show after another event

A user makes a change in a textarea. When this change occurs and another condition is true (in this particular case, the condition is that a text field contains "yes"), I show a bootstrap popover. 

showPopover = function() {
    return $(this).popover("show");
};
  hidePopover = function() {
    return $(this).popover("hide");
};

var cond = true;
$("textarea").on("change keyup", function (e) {
    var pt = $("#user_user_profile_attributes_title").val();
    if (cond&&pt=="yes") {
        $("[rel=next-popover]").popover({
        placement: "right",
        trigger: "manual"
    })
    .hover(showPopover, hidePopover).click(showPopover);
    }
    else {
        $("[rel=next-popover]").popover({
        placement: "right",
        trigger: "manual"
    })
    .hover(hidePopover, hidePopover).click(hidePopover);
    }
});

Steps to reproduce: 1) Go to http://jsfiddle.net/bpjavascript/KscL5/ 2) type yes in the text field 3) make a change in the text area & see the popover when click/hover 4) change yes to something else & make a change in the text field, no popover 5) change text field back to yes & make a change in the text field - now you should see a brief popover flash. Why is this? I want it show as in step 3.

Upvotes: 0

Views: 828

Answers (1)

mccannf
mccannf

Reputation: 16659

You are binding multiple events of the same type to the popover.

Instead, in your conditional logic you should bind one event if the condition is met or unbind the event if not.

So in your else statement you should have something like:

else {
    $("[rel=next-popover]").popover({
    placement: "right",
    trigger: "manual"
    })
    .off( "mouseenter mouseleave" ).off("click");
}

Fiddle here.

Upvotes: 1

Related Questions