0

[http://jsfiddle.net/RunLC/1/] にフィドルを含め、いくつかの必要な調整を行いました。

私は独自のツールチップを作成しており、それをほとんど機能させることができます。

実際、最初は意図したとおりに機能し、その後のクリックでは奇妙な動作をします。

2回目のクリックでツールチップが右下隅に配置され、4回目のクリックでツールチップが何らかの形で消えます。5回目のクリックで元の場所に戻り、その後、クリックするたびにコーナーと元の場所に前後に移動します。

私が探している動作は、トリガーのいずれかでクリックするたびに、コールバックを作成し、マウスアウトで非表示にして、目的の場所にツールチップを表示することです。一度に表示されるツールチップは 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 に答える