Show a bootstrap popover after finish typing

Question

I have this field that i want to check if it's valid and i would like to show a popover if it's not the case.

$(document).ready(function(){

$('input[name=email]').keyup(email_check);
});

function email_check(){

    $('input[name=email]').parent().removeClass("has-error has-feedback").removeClass("has-success has-feedback");
    $('span.glyphicon').remove();
    var email = $('input[name=email]').val()
if( !isValidEmailAddress( email ) ) { 

$("input[name=email]").popover({trigger: 'focus', content: "Error!", placement : 'bottom'});
$('input[name=email]').parent().addClass( "has-error has-feedback" ).append("<span class='glyphicon glyphicon-remove form-control-feedback'></span>");
return false;
    }else{
        $("input[name=email]").popover({trigger: 'focus', content: "Valid!", placement : 'bottom'});
        $('input[name=email]').parent().addClass( "has-success has-feedback" ).append("<span class='glyphicon glyphicon-ok form-control-feedback'></span>");

    return true;
    }
}

The issue here is that the popver doesn't show until I get out of the field and focus again on it! Hope you understand what I mean! How can I fix it?

Much appreciated!

Answer 1

http://bootply.com/124932

You need to change the popover trigger to manual, and then use the show method to display the popover...

$("input[name=email]").popover({trigger: 'manual', content: "Error!", placement : 'bottom'});
$("input[name=email]").popover('show');