悬停时自定义工具提示消息框 [英] Custom Tooltip message box on hover

问题描述

大家好我在悬停表td上显示工具提示时出现问题，会显示相应的消息。问题是第一次显示正确的消息，但在第二次时它不完全是我想要的相同td我正在徘徊它。请参考下面的代码，问题是在类is_invalid的情况下。

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

推荐答案

（' table td'）。on（' mouseover'，function（e）{
var div =

('table td').on('mouseover',function(e) { var div =

（ this ）。find（ .valid_message_box）;
if （div）{
if （

(this).find(".valid_message_box"); if(div){ if(

（ this ）。hasClass（ is_valid））{

(this).hasClass("is_valid ")){

这篇关于悬停时自定义工具提示消息框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！