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

    }
};

动态工具提示不起作用

1 个答案: