jQuery UI API - Componente de información sobre herramientas (Tooltip Widget)

Categoría

Widgets

Uso

Descripción:Información sobre herramientas personalizable y tematizable, que reemplaza a la información sobre herramientas nativa.

Nuevo en la versión:1.9

La información sobre herramientas (Tooltip) reemplaza a la información sobre herramientas nativa, haciéndolas tematizables y permitiendo varias personalizaciones:

• Mostrar no solo el título, sino también otro contenido, como notas al pie en línea o contenido adicional recuperado mediante Ajax.
• Posicionamiento personalizado, por ejemplo, centrar la información sobre herramientas en el elemento.
• Añadir estilos adicionales para personalizar la apariencia de áreas de advertencia o error.

De forma predeterminada, se utiliza una animación de desvanecimiento para mostrar y ocultar la información sobre herramientas, una apariencia que resulta más elegante que simplemente alternar la visibilidad. Esto se puedeshowyhidepersonalizar mediante opciones.

itemsycontentLas opciones deben mantenerse sincronizadas. Si usted cambia una de ellas, debe cambiar también la otra.

En general, los elementos deshabilitados no disparan ningún evento DOM. Por lo tanto, no es posible controlar adecuadamente la información sobre herramientas de los elementos deshabilitados, porque necesitamos escuchar eventos para decidir cuándo mostrar y ocultar la información sobre herramientas. Esto hace que jQuery UI no pueda garantizar ningún nivel de soporte para la información sobre herramientas adjunta a elementos deshabilitados. Esto significa que si necesita mostrar información sobre herramientas en elementos deshabilitados, es posible que deba utilizar una combinación de información sobre herramientas nativa y la información sobre herramientas de jQuery UI.

Tematización

El componente de información sobre herramientas (Tooltip Widget) utilizajQuery UI CSS Frameworkpara definir el estilo de su apariencia y sensación. Si necesita utilizar estilos específicos de la información sobre herramientas, puede usar los siguientes nombres de clase CSS:

• ui-tooltipEl contenedor exterior de la información sobre herramientas.
  • ui-tooltip-contentEl contenido de la información sobre herramientas.

Dependencias

• UI Core
• Widget Factory
• Position
• Effects Core(Opcional; cuando se usa conshowyhidela opción)

Notas adicionales

• Este componente requiere algún CSS funcional, de lo contrario no funcionará. Si ha creado un tema personalizado, utilice el archivo CSS especificado por el widget como punto de partida.

Ejemplos

Crea una información sobre herramientas (Tooltip) en el documento utilizando la delegación de eventos para todos los elementos con el atributo title.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>工具提示框部件（Tooltip Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<p>
  <a href="../index.html" title="锚描述">锚文本</a>
  <input title="输入帮助">
</p>
<script>
  $( document ).tooltip();
</script>
 
</body>
</html>

Ver demostración