Question

hope this is the right stack for this question.

I am having issue with my tooltips vs errormessages. my tooltips are set to display on “Focus” in each text well, they appear and disapear as you tab through the wells a few have error messages if the data entered does not fit the criteria. the trouble is the error message pops up then the focus shift to the next box closing the error message before it can be read. the focus automatically shifts back to the incorrectly entered box okay but then the original tooltip appears.

Is there a way to cancel the “change focus” or “blur” functions if the field is incorrect, set the time for the error message to be displayed or delay “blur” somehow so that the error message remains for at least 5-10 seconds?

Thank you for your time and consideration
Winston

Answer 1

You can use setTimeout to set a variable once 5 seconds have passed before blur is triggered. If that’s not the case you can hide the message in the setTimeout handler instead.

var focusAtLeastFiveSecondsAgo;
$(thing).focus(function(){
    showMessage();
    focusAtLeastFiveSecondsAgo = false;
    setTimeout(function(){
         focusAtLeastFiveSecondsAgo = true;
         if (!$(thing).is(":focus")){
              hideMessage();
         }
    }, 5000);
});
$(thing).blur(function(){
    if (focusAtLeastFiveSecondsAgo){
         hideMessage();
    }
});

Notice that we check if the element is still focussed in the setTimeout handler. If it isn’t blur has been triggered but was ignored because the message was only just displayed.

For code readability you might want to create a jQuery plugin for this that stores the variable and handles the minimum delay.