動態工具提示不起作用

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(); 

    } 
};