动态工具提示不起作用

Question

我想创建一个动态工具提示给我的应用程序，但是这不起作用，我可以有一些想法吗？

下面是我的代码，试图通过Java脚本检索工具提示。

<input type="text" tooltipid="testfamily" onclick="tooltipshow(this);" id="family" 
    value="family " /> 

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> 
<script type="text/javascript"> 
var data = { 
    name: "enter your name", 
    family: "enter your family", 
    testfamily: "enter your family", 
    uc1_txtname: "enter your name for Control 1 (User Control1)", 
    uc2_txtname: "enter your name for Control 2 (User Control2)" 
} 
function tooltipshow(e) { 

    var Tip = $("<div class='dinamictip'></div>"); 
    Tip.text(''); 

    var ToolTip = $(e).attr('tooltipid'); 
    if (ToolTip != null) { 
     var offset = $(e).offset(); 
     var height = $(e).height() + 10; 
     Tip.text(data[ToolTip]); 
     Tip.css('position', 'absolute').css('left', offset.left).css('top', offset.top - height); 
     Tip.appendTo('body'); 

     Tip.remove(); 

    } 
}; 

Answer 1

我没有测试你的代码，但可能的罪魁祸首是Tip.remove();：你是因为你创建它尽快删除提示。

尝试在您的tooltipshow函数中执行此更改：第一次执行此代码时，它不会找到工具提示的div，因此它将创建它并将其添加到主体（现在隐藏）。然后，当您下次调用代码时，它会找到旧的工具提示并重新使用它。

function tooltipshow(e) { 

    var Tip = $("#mydinamictip"); 
    if(Tip.length==0){ 
     Tip = $("<div id='mydinamictip' class='dinamictip'></div>"); 
     Tip.hide().appendTo('body'); 
    } 

    Tip.text(''); 

    var ToolTip = $(e).attr('tooltipid'); 
    if (ToolTip != null) { 
     var offset = $(e).offset(); 
     var height = $(e).height() + 10; 
     Tip.text(data[ToolTip]); 
     Tip.css('position', 'absolute').css('left', offset.left).css('top', offset.top - height); 
     Tip.show(); 

    } 
};