0

我在 [http://jsfiddle.net/RunLC/1/] 中包含了一个小提琴，并进行了一些必要的修改。

我正在构建自己的工具提示并设法让它几乎可以工作。

实际上它第一次按预期工作，然后在随后的点击中它的行为很奇怪。

在第二次单击中，它会将工具提示放在右下角，然后在第四次单击中，工具提示会以某种方式消失。在第五次点击中，它回到它的位置，然后在每次点击时来回移动到角落和它的位置。

我正在寻找的行为是，在每次单击时，在任何触发器中，它都应该进行回调并在所需位置显示工具提示，并在鼠标悬停时隐藏。一次只显示一个工具提示。

这是脚本：

<script>
$(document).ready(function(){
    $(".tool").click(function(){
        var tool = $(this).attr("value");
        var offset = $(this).offset();
        var tool_height = $("#tooltip_box").height();
        var tip_top = offset.top - tool_height + 20;
        var tip_left = offset.left +100;
        $.ajax({
            type: "POST",
            url: "tooltip.php",
        dataType:"html",
            data: "tool="+tool,
            success: function(data){
        $("#tooltip_box").html(data);
        $("#tooltip_box").offset({ top: tip_top, left: tip_left });
        //show tool tips 
                $('#tooltip_box').show();    
                $('.tool').mouseout(function () {
                    $("#tooltip_box").hide();
                });
            },
        });
    });
});
</script>

这些是触发器的示例：

<span class="z2">Safety items(qty)
    <a href="#"><img id="tip1" src="img/i.png" class="tool" value="1000" title=""/></a>
</span>

<span class="z4">Performance
    <a href="#"><img id="tip2" src="img/i.png" class="tool" value="1001" title=""/></a>
</span>

工具提示本身：

<div id="tooltip_box"></div>
4

1 回答 1

0

问题似乎是使用 offset() 来定位工具提示。显然它以自己为食。

我改为 css() 并让它工作。

请参阅小提琴http://jsfiddle.net/RunLC/15/。

下面的代码改编自我的原始代码以适应 jsfiddle。

$(".tool").click(function () {
var tool = $(this).attr("value");
var offset = $(this).offset();
var tool_height = $("#tooltip_box").height();
var tip_top = (offset.top - tool_height) + 200;
var tip_left = offset.left + 50;
$("#tooltip_box").html('tooltip text blalallal');
$("#tooltip_box").css("top",tip_top);
$("#tooltip_box").css("left",tip_left);

//show tool tips 
$('#tooltip_box').show();
$('.tool').mouseout(function () {
    $("#tooltip_box").hide();
});
});
于 2013-06-25T13:25:22.803 回答