var onEnableHelpCheckChange = function() {
// Checking weather checkbox is checked
if ($("#enable-help").prop('checked') === true) {
$('#nav-help-img').attr('src','/assets/images/help-1.png');
appendPreviousImages();
// bind custom context menu
$('#helpDiv').on("mousedown", function (event) {
if(isAnyPopOver2Visible){
if(!$(this).closest('#popover-output-div').length){
$('.helpBtn').popover('hide');
}
isAnyPopOver2Visible = false;
}
});
}
};
<div class="popover-output popover font-size-9pt" id="popover-output-div">
<label id="lbl-output-help"></label>
<textarea class="resize-none font-size-9pt width-400px" rows="6" id="txt-output-help" hidden></textarea>
<div class="row font-size-8pt popover-footer">
<a href="javascript:void(0);" id="btn-edit" onclick="BusinessPortal.Help.editHelpText();">Edit</a>
<a class="padding-left-10px" href="javascript:void(0);" id="btn-remove" onclick="BusinessPortal.Help.removeHelpPopover();">Remove</a>
<a href="javascript:void(0);" id="editable-save" onclick="BusinessPortal.Help.saveEditedHelpText();" hidden>Save</a>
</div>
</div>
I have below code to hide the popover and button. But the problem is even if i click on the buttons on the popover it get hide.
What i want to do is show the popover when hoved and hide the popover with mousedown event. But it should not hide when i click on the popover.
$('#helpDiv').on("mousedown", function (event) {
$('.helpBtn').popover('hide');
});