Всплывающая подсказка JqueryUI при нажатии кнопки вместо зависания появится в другом месте

Я использую подсказку JQueryUI для отображения динамических сообщений пользователю. В основном я хочу отображать всплывающую подсказку поверх поля ввода, когда пользователь нажимает кнопку.

То, как я закодировал это, работает только при наведении курсора на верхнюю часть кнопки, а в примерах JQueryUI нет никакой помощи в достижении этого сценария. Как я могу отличаться от эффекта зависания и заставить его работать с событием клика на кнопке? Как я могу это достичь?

Я использую jquery-ui-1.9.0.custom.js и jquery-1.8.2.js для этого.

Код HTML: Я хочу отобразить сообщение поверх этого окна ввода

<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"
               }
            });
});

Ответы

Ответ 1

Самый простой способ - удалить атрибут title 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(), чтобы установить ограничение по времени, после которого всплывающая подсказка закроется.