1

ツールチップを作成しています。マーカーにカーソルを合わせると、ツールチップが表示されます。

HTML：

<div class="trigger" data-loc="locationE" id="locationE">
    <div class="tooltip">
        <h2>Here is a title</h2>
        <p>Here is some Compy About this location</p>
        <h3>215.237.9932</h3>
    </div>
</div>

JQuery：

$(document).ready(function() {
    $(".tooltip").each(function() {
        toolHeight = $(this).outerHeight();
        toolHeightPlus = $(this).outerHeight() + 20;
        $(this).css({
            "top": -+toolHeight
        });
    });
    $(".trigger").hover(function() {
        $("#" + $(this).data("loc") + " .tooltip").stop().animate({
            "opacity": "1",
            "top": -+toolHeightPlus
        });
    }, function() {
        $("#" + $(this).data("loc") + " .tooltip").stop().animate({
            "opacity": "0",
            "top": -+toolHeight
        });
    });
});

データ属性を使用している理由は、アプリケーションの別の部分のためであるため、ここで言及する必要はありません。私が抱えている問題は、不透明度が0の場合でも、ツールチップが配置されている場所にカーソルを合わせると、ユーザーがツールチップアニメーションをトリガーすることです。不透明度がゼロで.triggerないユーザーにカーソルを合わせた場合にのみ、ツールチップをトリガーします。 .tooltip。どうすればこれを達成できますか？

4

3 に答える 3

0

1つのオプションは、ツールチップのCSS表示を非表示のときに「なし」に設定し、表示するときに「ブロック」に設定することです。これにより、.tooltip html 要素が表示されない場合にスペースが占有されるのを防ぐことができます。

于 2012-07-11T17:23:55.493 に答える
0

ツール ヒント マークアップをトリガーの外に移動します。トリガー div はツールチップをラップしているため、実際にはツールチップがポップアップしています。トリガーの上にカーソルを置いてこれを行うだけの場合は、それらを別々の要素にします。

于 2012-07-11T17:14:57.703 に答える
0

HTML には だけのスペースがないため、リクエストは HTML に問題があるように見えます。そのため、要素ではない要素.triggerにさらにコンテンツを追加しない限り、リクエストが機能しないように見えます。.trigger.tooltip

.trigger要素にさらにスペースを追加した場合は、イベントのターゲットを見て、行動する前に次のような適切なクラスがあるかどうかを確認できます。

$(".trigger").hover(function(e) {
    if (!$(e.target).hasClass(".trigger")) return;
    $("#" + $(this).data("loc") + " .tooltip").stop().animate({
        "opacity": "1",
        "top": -+toolHeightPlus
    });
}, function(e) {
    $("#" + $(this).data("loc") + " .tooltip").stop().animate({
        "opacity": "0",
        "top": -+toolHeight
    });
});
于 2012-07-11T17:22:06.647 に答える