0

jquery tools Tooltip を使用してツールチップを作成しています。

このようなツールチップを作成しました...クリックしたときにのみ開き、閉じるボタンを押すと閉じるツールチップです(「closeTooltip」イベントをトリガーします)。

$('#request_button').tooltip({
        opacity: 1.0,
        position: 'top center',
        offset: [10, 0],
        events: {
            def: "openTooltip, closeTooltip",
            tooltip: "undefinedEvent, closeTooltip"
        },
        onBeforeShow: function() {
            alert("I will hide the existing tooltips first");
            $('#request_button').trigger('closeTooltip');
        },
        onShow: function() {
            alert("I have shown the new tooltip");
        },
        onBeforeHide: function() {
            alert("I have started hiding existing tooltips");
        },
        onHide: function() {
            alert("I have hidden all existing tooltips");
        },
        tip: "#tooltip_contents" // I am using same div for multiple trigger elements
    });

このようにツールチップを開閉しています..

$('#request_button').click(function() {
    $(this).trigger('openTooltip');
});
$('#close_tooltip').click(function() {
    $('#request_button).trigger('closeTooltip');
});

複数のトリガー要素が定義されているため、開いているツールチップをすべて閉じる必要があります。onBeforeShow() イベントでこれを試したところ、思い通りに動作しませんでした。

警告メッセージは次の順序で表示されました...

  • 最初に既存のツールチップを非表示にします
  • 新しいツールチップを表示しました
  • 既存のツールチップを隠し始めました
  • 既存のツールチップをすべて非表示にしました

これが行うことは、現在のツールチップも非表示にすることです。欲しい順番は…

  • 最初に既存のツールチップを非表示にします
  • 既存のツールチップを隠し始めました
  • 既存のツールチップをすべて非表示にしました
  • 新しいツールチップを表示しました

どうすればこれを達成できますか？ここで何が間違っているのですか？

4

3 に答える 3

2

今日も似たようなことをしたと思います。私はイベントを使用しています: クリックのものを設定するので、トリガー用のクリック関数を書く必要はありません。

onBeforeShowツールチップになるすべてのdivを非表示にするだけです。

また、閉じるリンクとともにツールチップに追加されます。

$(".will-be-hidden").tooltip({
  onBeforeShow: function() { $('.unique-id').hide(); },
  events: { def: 'click, mouseout', tooltip: 'mouseover, click'},
  effect: 'slide',
  position: "center right",
  opacity: 0.7,
  relative: true,
  offset: [-20,-100],
  opacity: 1.0
}).dynamic({ right: { direction: 'left' } });

$('div.unique-id').append('<br /><br /><p style="cursor:pointer; color:#003B81">x click to close</p>');
于 2011-10-19T22:31:33.783 に答える
1

さて、現時点では、非表示になる前に表示されています。onBeforeShow、onShow、onBeforeHide、onHideを呼び出します。私の仮定は、これがツールチッププラグインの実行方法であるということです。あなたが望む順序はonBeforeShow、onBeforeHide、onHide、onShowであり、これはかなり無意味です。

私があなたがやりたいと思うのは、現在のツールチップを表示する前に、かなり単純にすべてのツールチップを非表示にすることです。その場合、ツールチップをトリガーするイベントでそれを行うことはできませんか？何かのようなもの：

$("#request_button").click(function (e)
{
    e.preventDefault;
    $(".reference_to_tooltip_here").trigger("closeTooltip"); // or just .remove()/.hide();
    $(this).trigger("openTooltip");
});

そうすれば、新しいツールチップを開く前にすべてのツールチップを閉じることができますか？プラグイン機能に他のツールチップを非表示にするオプションがない場合は、付属のイベントを無視し、jQueryで開く前にそれらを閉じてください。

また、ちょうどfyi、あなたは現在持っています：

    onBeforeShow: function() {
    alert("I will hide the existing tooltips first");
    $('#request_button').trigger('closeTooltipEvent');

trigger('closeTooltip');とにかくそうする必要があると思います。

于 2011-05-13T07:05:07.993 に答える
0

私にとってうまくいったのは次のコードでした...

$("#request_button").click(function (e)
{
    var tooltip_api = $(this).data('tooltip');
    if (tooltip_api.isShown(true)) {
        tooltip_api.hide();
    }
});

お役に立てれば。

于 2011-05-16T00:58:46.103 に答える