web-dev-qa-db-ja.com

ホバーする代わりにボタンをクリックすると、jqueryUIツールチップが別の場所に表示される

JQueryUI tooltipを使用して、ユーザーに動的メッセージを表示しています。基本的に、ユーザーがボタンをクリックしたときに、入力フィールドの上にツールチップを表示したいと思います。

私がコーディングした方法は、ボタンの上にカーソルを置いたときにのみ機能し、JQueryUIの例では、このシナリオを達成するための助けがありません。ホバー効果とどのように違い、ボタンのクリックイベントで動作するのですか？どうすればこれを達成できますか？

これにはjquery-ui-1.9.0.custom.jsとjquery-1.8.2.jsを使用しています。

HTML Code：この入力ボックスの上にメッセージを表示したい

<input id="myInput" type="text" name="myInput" value="0" size="7" />

ポップアップツールチップに順番にクリックするボタン

<input id="myBtn" type="submit" name="myBtn" value="myBtn" title="this is not used" class="myBtn" />

JQueryコード

$(document).ready(function() {
    $(".myBtn").tooltip({
               content: function () {
                  return '<span id="msg">Message</span>';
               },
               position: {
                  my: "center bottom",
                  at: "center top"
               }
            });
});
jqueryhtmljquery-uijquery-plugins
16
Swarne27

最も簡単な方法は、myBtnのタイトル属性を削除し、ツールチップを別の要素に移動することです。例えば：

_<a id="myTooltip" title="Message"></a>
_

次に、次のことができます。

_$('#myTooltip').tooltip({
    //use 'of' to link the tooltip to your specified input
    position: { of: '#myInput', my: 'left center', at: 'left center' }
});

$('#myBtn').click(function () {
    $('#myTooltip').tooltip('open');
});
_

同様に、ツールチップを閉じることができます

_$('#myTooltip').tooltip('close');
_

ツールチップを開いた後で自動的に閉じるには、closeイベント内でopenメソッドを呼び出すだけです。

_$('#myTooltip').tooltip({
    open: function (e) {
        setTimeout(function () {
            $(e.target).tooltip('close');
        }, 1000);
    }
});
_

_e.target_（thisはopenイベント内では機能しないため）とsetTimeout()を使用して、ツールチップが閉じるまでの時間制限を設定します。

18
Elliott