动态工具提示不起作用

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

    }
};