Custom Tooltip message box on hover

See more:

HTML

jQuery

CSS3

Hi everyone I've a problem showing tooltip on hover table td, An appropriate message appear. Problem is that first time message showing correct but on second time its not exact that i want on same td that I'm hovering it. Please refer below code, problem is in condition that has class is_invalid.

var indicator = {
    messages :{
        valid : "It is a Valid Change",
        invalid : "It is an Invalid Change",
        invalidEmpty : "You can not have an empty Name"
    },
    tooltipMessage : function(){
        var self = this;

        $('table td').on('mouseover',function(e) {
            var div = $(this).find(".valid_message_box");
            if(div){
                if($(this).hasClass("is_valid ")){
                    $(div).html(self.messages.valid).show();
                    return;
                }
                if($(this).hasClass("is_invalid")){
                    var dataCell = $(this).text();
                    dataCell == "" ? $(div).html(self.messages.invalidEmpty).show() : $(div).html(self.messages.invalid).show();
                    return;
                }
            }
            //$(".valid_message_box").css('top', $(this).position().top - 30).css('left', $(this).position().left + $(this).width());
        });
        $('table td').on('mouseout',function(e) {
            $(this).find(".valid_message_box").hide();
        });
    }
}

Thanks