ejemplos - La información sobre herramientas de JqueryUI en el botón hace clic en lugar de desplazarse para aparecer en otra parte

jquery ui tooltip

Question

Estoy usando JQueryUI tooltip para mostrar algunos mensajes dinámicos al usuario. Básicamente, quiero mostrar la información sobre herramientas en la parte superior de un campo de entrada cuando un usuario hace clic en un botón.

La forma en que he codificado funciona solo cuando se coloca sobre el botón, y en los ejemplos de JQueryUI no hay ayuda para lograr este escenario. ¿Cómo difiero del efecto de desplazamiento y lo hago funcionar con el evento click del botón? ¿Cómo puedo conseguir esto?

Estoy usando jquery-ui-1.9.0.custom.js y jquery-1.8.2.js para esto.

Código HTML: quiero mostrar el mensaje en la parte superior de este cuadro de entrada

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

El botón en el que hago clic para abrir la información sobre herramientas emergente

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

Código JQuery

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

Answer 1

La forma más fácil es eliminar el atributo de título de myBtn y mover su información sobre herramientas a otro elemento. Por ejemplo:

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

Entonces puedes hacer:

$(''#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'');
});

Del mismo modo, puede cerrar la información sobre herramientas con

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

Para cerrar automáticamente la información sobre herramientas después de abrir, solo necesita llamar al método close dentro del evento open :

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

Usar e.target (ya que this no funcionará dentro del evento open ) y setTimeout() para establecer un límite de tiempo después del cual se cerrará la información sobre herramientas.