JqueryUI: descripción emergente

El widget de información sobre herramientas de jQueryUI reemplaza la información sobre herramientas nativa. Este widget agrega nuevos temas y permite la personalización. Primero, entendamos qué son las descripciones emergentes. La información sobre herramientas se puede adjuntar a cualquier elemento. Para mostrar información sobre herramientas, simplemente agregue el atributo de título a los elementos de entrada y el valor del atributo de título se utilizará como información sobre herramientas. Cuando coloca el mouse sobre el elemento, el atributo del título se muestra en un pequeño cuadro al lado del elemento.

jQueryUI proporciona tooltip()método para agregar información sobre herramientas a cualquier elemento en el que desee mostrar información sobre herramientas. Esto proporciona una animación de fundido de forma predeterminada para mostrar y ocultar la información sobre herramientas, en comparación con simplemente alternar la visibilidad.

Sintaxis

los tooltip() El método se puede utilizar de dos formas:

$ (selector, contexto) .tooltip (opciones) Método

El método de información sobre herramientas (opciones) declara que se puede agregar una información sobre herramientas a un elemento HTML. El parámetro de opciones es un objeto que especifica el comportamiento y la apariencia de la información sobre herramientas.

Sintaxis

$(selector, context).tooltip(options);

Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción para proporcionar, las separará con una coma de la siguiente manera:

$(selector, context).tooltip({option1: value1, option2: value2..... });

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:

No Señor. Opción y descripción
1 contenido

Esta opción representa el contenido de una información sobre herramientas. Por defecto su valor esfunction returning the title attribute.

Option - content

Esta opción representa el contenido de una información sobre herramientas. Por defecto su valor esfunction returning the title attribute. Esto puede ser de tipo:

  • Function- La devolución de llamada puede devolver el contenido directamente o llamar al primer argumento, pasando el contenido, por ejemplo. para contenido ajax.

  • String - Una cadena de HTML para usar en el contenido de la información sobre herramientas.

Syntax

$(".selector").tooltip(
   { content: "Some content!" }
);
2 discapacitado

Esta opción cuando se establece en verdadero desactiva la información sobre herramientas. Por defecto su valor esfalse.

Option - disabled

Esta opción cuando se establece en verdadero desactiva la información sobre herramientas. Por defecto su valor esfalse.

Syntax

$(".selector").tooltip(
   { disabled: true }
);
3 esconder

Esta opción representa el efecto de animación al ocultar la información sobre herramientas. Por defecto su valor estrue.

Option - hide

Esta opción representa el efecto de animación al ocultar la información sobre herramientas. Por defecto su valor estrue. Esto puede ser de tipo:

  • Boolean- Esto puede ser verdadero o falso . Cuando se establece en verdadero , la información sobre herramientas se desvanecerá con la duración predeterminada y la aceleración predeterminada.

  • Number - La información sobre herramientas se desvanecerá con la duración especificada y la aceleración predeterminada.

  • String- La información sobre herramientas se ocultará mediante el efecto especificado, como "slideUp", "fold" .

  • Object- Los valores posibles son efecto, retraso, duración y suavizado .

Syntax

$(".selector").tooltip(
   { hide: { effect: "explode", duration: 1000 } }
);
4 artículos

Esta opción indica qué elementos pueden mostrar información sobre herramientas. Por defecto su valor es[title].

Option - items

Esta opción indica qué elementos pueden mostrar información sobre herramientas. Por defecto su valor es[title].

Syntax

$(".selector").tooltip(
   { items: "img[alt]" }
);
5 posición

Esta opción decide la posición de la información sobre herramientas en el elemento de destino asociado. Por defecto su valor esfunction returning the title attribute. Los valores posibles son: my, at, of, collision, using, within.

Option - position

Esta opción decide la posición de la información sobre herramientas en el elemento de destino asociado. Por defecto su valor esfunction returning the title attribute. Los valores posibles son: my, at, of, collision, using, within.

Syntax

$(".selector").tooltip(
   { { my: "left top+15", at: "left bottom", collision: "flipfit" } }
);
6 show

Esta opción representa cómo animar la visualización de información sobre herramientas. Por defecto su valor estrue.

Option - show

Esta opción representa cómo animar la visualización de información sobre herramientas. Por defecto su valor estrue. Esto puede ser de tipo:

  • Boolean- Esto puede ser verdadero o falso . Cuando se establece en verdadero , la información sobre herramientas se desvanecerá con la duración predeterminada y la aceleración predeterminada.

  • Number - La información sobre herramientas se desvanecerá con la duración especificada y la aceleración predeterminada.

  • String- La información sobre herramientas se ocultará mediante el efecto especificado, como "slideUp", "fold" .

  • Object- Los valores posibles son efecto, retraso, duración y suavizado .

Syntax

$(".selector").tooltip(
   { show: { effect: "blind", duration: 800 } }
);
7 tooltipClass

Esta opción es una clase que se puede agregar al widget de información sobre herramientas para información sobre herramientas, como advertencias o errores. Por defecto su valor esnull.

Option - tooltipClass

Esta opción es una clase que se puede agregar al widget de información sobre herramientas para información sobre herramientas, como advertencias o errores. Por defecto su valor esnull.

Syntax

$(".selector").tooltip(
   { tooltipClass: "custom-tooltip-styling" } }
);
8 pista

Esta opción cuando se establece en verdadera , la información sobre herramientas sigue / rastrea el mouse. Por defecto su valor esfalse.

Option - track

Esta opción cuando se establece en verdadera , la información sobre herramientas sigue / rastrea el mouse. Por defecto su valor esfalse.

Syntax

$(".selector").tooltip(
   { track: true }
);

La siguiente sección le mostrará algunos ejemplos prácticos de la funcionalidad de información sobre herramientas.

Funcionalidad predeterminada

El siguiente ejemplo demuestra un ejemplo simple de la funcionalidad de información sobre herramientas que no pasa parámetros al tooltip() método.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-1").tooltip();
            $("#tooltip-2").tooltip();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Name:</label>
      <input id = "tooltip-1" title = "Enter You name">
      <p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
         I also have a tooltip</a></p>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tooltipexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

En el ejemplo anterior, coloque el cursor sobre los enlaces anteriores o use la tecla de tabulación para alternar el enfoque en cada elemento.

Uso de contenido, seguimiento y deshabilitado

El siguiente ejemplo muestra el uso de tres opciones importantes (a) content (b) track y (c) disabled en la función de información sobre herramientas de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-3" ).tooltip({
               content: "<strong>Hi!</strong>",
               track:true
            }),
            $( "#tooltip-4" ).tooltip({
               disabled: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Message:</label>
      <input id = "tooltip-3" title = "tooltip"><br><br><br>
      <label for = "name">Tooltip disabled for me:</label>
      <input id = "tooltip-4" title = "tooltip">
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tooltipexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

En el ejemplo anterior, el contenido de la información sobre herramientas del primer cuadro se establece mediante la opción de contenido . También puede notar que la información sobre herramientas sigue al mouse. La información sobre herramientas para el segundo cuadro de entrada está deshabilitada.

Uso de la posición

El siguiente ejemplo muestra el uso de la opción position en la función de información sobre herramientas de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         body {
            margin-top: 100px;
         }

         .ui-tooltip-content::after, .ui-tooltip-content::before {
            content: "";
            position: absolute;
            border-style: solid;
            display: block;
            left: 90px;
         }
         .ui-tooltip-content::before {
            bottom: -10px;
            border-color: #AAA transparent;
            border-width: 10px 10px 0;
         }
         .ui-tooltip-content::after {
            bottom: -7px;
            border-color: white transparent;
            border-width: 10px 10px 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#tooltip-7" ).tooltip({
               position: {
                  my: "center bottom",
                  at: "center top-10",
                  collision: "none"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <label for = "name">Enter Date of Birth:</label>
      <input id = "tooltip-7" title = "Please use MM.DD.YY format.">
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tooltipexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

En el ejemplo anterior, la posición de la información sobre herramientas se establece en la parte superior del cuadro de entrada.

$ (selector, context) .tooltip ("action", [params]) Método

El método de información sobre herramientas (acción, parámetros) puede realizar una acción en los elementos de información sobre herramientas, como deshabilitar la información sobre herramientas. losaction se especifica como una cadena en el primer argumento y, opcionalmente, uno o más params se puede proporcionar en función de la acción dada.

Básicamente, aquí las acciones no son nada, pero son métodos jQuery que podemos usar en forma de cadena.

Sintaxis

$(selector, context).tooltip ("action", [params]);

La siguiente tabla enumera las acciones para este método:

No Señor. Acción Descripción
1 cerca()

Esta acción cierra la información sobre herramientas. Este método no acepta argumentos.

Action - close()

Esta acción cierra la información sobre herramientas. Este método no acepta argumentos.

Syntax

$(".selector").tooltip("close");
2 destruir()

Esta acción elimina completamente la funcionalidad de información sobre herramientas. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta argumentos.

Action - destroy()

Esta acción elimina completamente la funcionalidad de información sobre herramientas. Esto devolverá el elemento a su estado previo al inicio. Este método no acepta argumentos.

Syntax

$(".selector").tooltip("destroy");
3 inhabilitar()

Esta acción desactiva la información sobre herramientas. Este método no acepta argumentos.

Action - disable()

Esta acción desactiva la información sobre herramientas. Este método no acepta argumentos.

Syntax

$(".selector").tooltip("disable");
4 habilitar()

Esta acción activa la información sobre herramientas. Este método no acepta argumentos.

Action - enable()

Esta acción activa la información sobre herramientas. Este método no acepta argumentos.

Syntax

$(".selector").tooltip("enable");
5 abierto()

Esta acción abre la información sobre herramientas mediante programación. Este método no acepta argumentos.

Action - open()

Esta acción abre la información sobre herramientas mediante programación. Este método no acepta argumentos.

Syntax

$(".selector").tooltip("open");
6 opción (optionName)

Esta acción obtiene el valor asociado con optionName para la información sobre herramientas. Este método no acepta argumentos.

Action - option( optionName )

Esta acción obtiene el valor asociado con optionName para la información sobre herramientas. Este método no acepta argumentos.

Syntax

var isDisabled = $( ".selector" ).tooltip( "option", "disabled" );
7 opción()

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de información sobre herramientas actual. Este método no acepta argumentos.

Action - option()

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de información sobre herramientas actual. Este método no acepta argumentos.

Syntax

$(".selector").tooltip("option");
8 opción (optionName, valor)

Esta acción establece el valor de la opción de información sobre herramientas asociada con el optionName especificado .

Action - option( optionName, value )

Esta acción establece el valor de la opción de información sobre herramientas asociada con el optionName especificado .

Syntax

$( ".selector" ).tooltip( "option", "disabled", true );
9 opción (opciones)

Esta acción establece una o más opciones para la información sobre herramientas.

Action - option( options )

Esta acción establece una o más opciones para la información sobre herramientas.

Syntax

$( ".selector" ).tooltip( "option", { disabled: true } );
10 widget ()

Esta acción devuelve un objeto jQuery que contiene el elemento original. Este método no acepta argumentos.

Action - widget()

Esta acción devuelve un objeto jQuery que contiene el elemento original. Este método no acepta argumentos.

Syntax

$(".selector").tooltip("widget");

Ejemplos

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso de las acciones deshabilitar y habilitar .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#tooltip-8").tooltip({
               //use 'of' to link the tooltip to your specified input
               position: { of: '#myInput', my: 'left center', at: 'left center' },
            }),
            $('#myBtn').click(function () {
               $('#tooltip-8').tooltip("open");
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <a id = "tooltip-8" title = "Message" href = "#"></a>
      <input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
      <input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tooltipexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

En el ejemplo anterior, haga clic en el botón myBtn y aparecerá una información sobre herramientas.

Gestión de eventos en elementos de información sobre herramientas

Además del método de información sobre herramientas (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:

No Señor. Método y descripción del evento
1 crear (evento, ui)

Se activa cuando se crea la información sobre herramientas. Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - create(event, ui)

Se activa cuando se crea la información sobre herramientas. Donde evento es de tipo Evento y ui es de tipo Objeto .

Syntax

$(".selector").tooltip(
   create: function(event, ui) {}
);
2 cerrar (evento, ui)

Se activa cuando se cierra la información sobre herramientas. Por lo general, se activa al enfocarse o salir del mouse . Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - close(event, ui)

Se activa cuando se cierra la información sobre herramientas. Por lo general, se desencadena al enfocar o salir del mouse . Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • tooltip - Un elemento de información sobre herramientas generado.

Syntax

$(".selector").tooltip(
   close: function(event, ui) {}
);
3 abierto (evento, ui)

Se activa cuando se muestra o muestra la información sobre herramientas. Por lo general, desencadenada en focusin o pasar el ratón . Donde evento es de tipo Evento y ui es de tipo Objeto .

Event - open(event, ui)

Se activa cuando se muestra o muestra la información sobre herramientas. Por lo general, desencadenada en focusin o pasar el ratón . Donde evento es de tipo Evento y ui es de tipo Objeto. Los valores posibles de ui son:

  • tooltip - Un elemento de información sobre herramientas generado.

Syntax

$(".selector").tooltip(
   open: function(event, ui) {}
);

Ejemplos

El siguiente ejemplo demuestra el uso del método de evento durante la funcionalidad de información sobre herramientas. Este ejemplo demuestra el uso de eventos abiertos y cerrados .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tooltip functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'Hello welcome…',
               show: "slideDown", // show immediately
               open: function(event, ui) {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'Welcome to TutorialsPoint…',
               show: "fold", 
               close: function(event, ui) {
                  ui.tooltip.hover(function() {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function() {
                     $(this).fadeOut('500', function() {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   
   <body style = "padding:100px;">
      <!-- HTML --> 
      <div id = "target">
         <a href = "#" class = "tooltip-9">Hover over me!</a>
         <a href = "#" class = "tooltip-10">Hover over me too!</a>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tooltipexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

En el ejemplo anterior, la información sobre herramientas para ¡ Pasar el cursor sobre mí! desaparecen de inmediato, mientras que la información sobre herramientas de ¡ Coloca el cursor sobre mí también! se desvanece después de una duración de 1000 ms.