5

jquery の手がかりヒントを使用してツールヒントを表示しています :-) 必要に応じて、ユーザーがマウスを表示されたツールヒントに移動できるようにしたいので、スティッキーにしました。ただし、ユーザーがマウスをツールチップに移動しない場合、しばらくするとツールチップが消えます。これは hoverintent-plugin を使用して可能になるはずです。ただし、このプラグインは、ユーザーがマウスをプラグインの上に一度移動しない限り起動しません。その場合、cluetip はツールチップ自体を削除します...

ツールチップを表示するにはどうすればよいですか?

onShow でタイマーを起動したり、onmouseover でタイマーを無効にするツールチップにスクリプトを追加したり、そのようなことを考えていましたが、それは複雑すぎるようです...

誰かがより良いアイデアを得ましたか？:-)

ありがとう、

ポール

4

4 に答える 4

1

それをサポートするツールチップ プラグインがわからないので、自分で何かを作成する必要があるかもしれません。次の例は機能しますが、一般的で再利用可能にし、ツールチップ プラグインを使用するには、さらに作業が必要です。

<a href="#" onclick="activateTip()">click here</a>
<div id="tooltip" style="background: green; height: 30px; width: 50px; color: white;
   display: none; position: absolute">
   fake tooltip
</div>
<script type="text/javascript">

    function activateTip() {
       $("#tooltip").fadeIn(autoFade);
    }

    function autoFade() {
       var cancel = setTimeout(hideTip, 3000);
       $("#tooltip").mouseover(function () {
          clearTimeout(cancel);
          $("#tooltip").unbind("mouseover").mouseout(autoFade);
       });
    }

    function hideTip() {
       $("#tooltip").fadeOut().unbind("mouseover").unbind("mouseout");
    }

</script>
于 2011-10-10T10:45:48.153 に答える
0

このライブラリをいくつかのカスタマイズで使用します。77行目を置き換えることができます 

$tooltipC.html($tooltip.data("title"));

このファイルの次の行:

$tooltipC.html(options.content);

そして、次のように使用できます。

$('.tooltip-target').each(function () {
        $(this).tooltip({
            cssClass: "tooltip",
            content: $($(this).attr("rel")).html()
        });
    });

私のプロジェクトでわかるように、すべてのツールチップ ターゲットに対して、tootlip の html を使用してコントロールのセレクターで属性 rel を設定しました。次のように：

<img src="help.ico" class="tooltip-target" rel="#helpTooltip" />
<div style="display:none" id="helpTooltip">
    Some html content for tooltip
    <a href="help.html">Details..</a>
</div>
于 2011-06-22T17:23:48.623 に答える
0

質問は、「jqueryのcluetipとhoverintentを組み合わせることができるか?」というものでした。簡単な回答は次のとおりです。はい。

HoverIntent スクリプトをダウンロードしてページに含めるだけです。スクリプト (+ 例) はhttp://cherne.net/brian/resources/jquery.hoverIntent.htmlにあります。

HoverIntent を含めたら、「ClueTip」にいくつかの追加オプションを設定できます。

$basketTooltips.cluetip({
    attribute:        'rel',

        // other options        

    // HoverIntent specific options
    hoverIntent: {
        sensitivity:  3,
        interval:     100,
        timeout:     500
    },

});

手がかりの HoverIntent オプションは、元の HoverIntent オプションと同じです: http://cherne.net/brian/resources/jquery.hoverIntent.html

于 2013-03-27T14:26:51.193 に答える
0

次の方法を使用してそれを行うことができます。

JQuery:

//Change it to your tooltip object- ID/Name/Class
$("#tooltip").mouseout(function(){
  $(this).delay(500).queue(function() {
    $(this).css('display', 'none');
  });
//We use this method because, user can come over the element before its disapper.
}).mouseover(function() {
   if($(this).is(':visible'))
     $(this).css('display', '');
});
于 2011-10-13T10:17:34.293 に答える