HTML5: información sobre herramientas de moda con Tooltipster para jQuery

La información sobre herramientas es un trato justo. Permiten la colocación de información importante justo en el lugar donde se necesita esta información, independientemente del espacio de la pantalla. Tooltipster es un complemento para jQuery que tiene como objetivo hacer que el proceso de creación de información sobre herramientas sea lo más fácil posible al tiempo que proporciona la mayor funcionalidad disponible. Se ajustan a HTML5 y se pueden diseñar a su gusto usando CSS.

Informador de herramientas

Marque su información sobre herramientas a través del atributo TITLE

Informador de herramientas consta de solo dos archivos, un JavaScript (obviamente, el complemento) y un CSS para personalizar la apariencia. Después de haber incrustado ambos archivos justo después de jQuery en el encabezado de su sitio, puede activar el complemento:

$(document).ready(function() {
  $(".tooltip").tooltipster();
});

Nuestro pequeño ejemplo ejecuta el complemento en todos los elementos marcados con la clase tooltip angewendet. El contenido de la información sobre herramientas se marca a través de la común Title atributo. Tooltipster convierte todas las instancias de Título en información sobre herramientas ingeniosas. Su aspecto se puede personalizar aún más mediante el uso de CSS:

<a href="https://www.noupe.com/" title="Noupe Design Magazine" class="tooltip">noupe.com</a>

Use HTML dentro de la información sobre herramientas

Si el texto no es suficiente, también puede utilizar otros elementos HTML. El complemento puede procesar cualquier HTML dentro del Title atributo mediante el uso de JavaScript:

<a href="https://www.noupe.com/" title="<img src="noupe.png" width="50" height="50" / class="tooltip">Noupe Design Magazine">noupe.com</a>

Puede encontrar el marcado un poco desconcertante, pero funciona. Lo único que debe tener en cuenta es que este marcado se basa completamente en JavaScript. Por lo tanto, los navegadores con JavaScript deshabilitado solo mostrarán los contenidos como texto sin formato. Si está interesado en la preservación de las opciones de respaldo, debe omitir HTML dentro de su Title atributos

Temas y configuraciones individuales

Además del uso del tema estándar, puede crear sus propios temas individualmente a través de CSS, ya lo mencioné. Estos temas se activan como un parámetro de la llamada del complemento:

$(".tooltip").tooltipster({
  tooltipTheme: ".my-personal-tooltip"
});

Información sobre herramientas con elementos HTML

Además, podemos usar opciones para controlar el comportamiento de la información sobre herramientas. Podemos definir si se supone que una información sobre herramientas se muestra en una posición fija o en la posición actual del cursor del mouse:

$(".tooltip").tooltipster({
  followMouse: true
});

Conclusión: Informador de herramientas es un complemento realmente útil para obtener información sobre herramientas ingeniosas en prácticamente ningún tiempo.

(dpe)