Show popover when focus on a textbox, hide it on blur but not if popover is clicked

Question

My issue in simple terms:

• I've a text input.
• When it gains focus, a Bootstrap "popover" will appear via jquery's .on('focus',...)
• The popover contains a form with radioboxes

I want the Popover to hide on blur, but NOT when something is clicked inside the popover itself (otherway clicking on it will make the textbox lose focus and the popover disappears, making it useless).

Any ideas?

Answer 1

Yeah HTML classes, .data(), boolean flags... Whatever suits you

.on('click',...){

1. popover.addClass('oak');
2. popover.data('oak',true);
3. var oak = true;

then

.on('click',...,function(){
   //oak = popover.hasClass('oak');
   //oak = popover.data('oak');
   if(oak) return;
   popover.hide();
});