40+ Tooltips útiles Scripts con CSS, JavaScript y jQuery
Un elemento interesante de la interfaz de usuario, información sobre herramientas (también llamada información) hace que aparezca un pequeño cuadro cuando el cursor del mouse se desplaza sobre un determinado texto o imagen con información en relación con el elemento que se cierne sobre. En términos de la experiencia del usuario, la información sobre herramientas proporciona a los usuarios la fuente de información más rápida y sencilla. sin tener que hacer clic en nada.
Aunque la forma más sencilla de agregar información sobre herramientas a su texto es usar la etiqueta HTML o TITLE =””, ALT =””. Sin embargo, hay algunos realmente geniales. información sobre herramientas, diseños y estilos que puedes crear con JavaScript y CSS utilizando tooltips scripts. Vamos a ver.
CSS
Globo.css - El globo es una biblioteca CSS compuesto con SasS y LESS para mostrar una información sobre herramientas interactiva. El contenido y la posición de la información sobre herramientas se pueden configurar a través de datos- atributo. Puede mostrar la información sobre herramientas a la izquierda, derecha o izquierda-derecha. Usted puede incluso Añadir Emojis al contenido.. Balloon.css se puede instalar a través de NPM o cargarlo desde CDNJS.
Simptip - Hecho con SasS permitiendo reconfigure y recompile el código para que se ajuste a sus requerimientos. La posición y el contenido de la información sobre herramientas se pueden configurar a través del nombre de la clase y información sobre herramientas de datos atributo. Simptip está disponible como Paquete NPM, Yarn y Bower.
Hint.css - Una de las bibliotecas CSS populares para mostrar información sobre herramientas, Hint.css es utilizada por muchos sitios web populares como Fiverr, Webflow y Tridiv. A diferencia de las otras dos bibliotecas CSS, Hint.css utiliza aria-label Puede configurar el tamaño y el color a través de los nombres de clase. utilizando la metodología BEM. Hint.css está disponible en NPM, Bower y CDNJS.
Microtip - Otra biblioteca CSS impresionante para crear información sobre herramientas construida con “Accesibilidad” en mente, microtip usos aria-label para mantener el contenido de información sobre herramientas y datos- atributo para configurar el tamaño de la información sobre herramientas y la posición.
Utiliza la variable CSS que le permite personalizar la información sobre herramientas con solo el archivo CSS simple o simple. Las variables CSS ya son compatibles con muchos navegadores web y móviles. Microtip está disponible como NPM, paquete Yarn y UNPkg CDN.
Wenk - Es sólo 733 bytes. Una biblioteca súper ligera escrito en un CSS súper moderno usando CSSNext, LESS y SCSS Así podrás personalizar y recompilar los estilos a tu gusto. Wenk se puede descargar desde NPM, Yarn y los siguientes servicios gratuitos de CDN: rawgit.com y unpkg.com.
Tooltippy - Otro biblioteca ligera de CSS siendo sólo alrededor de 1 KB de tamaño. Tooltippy incluye varios temas prefabricados para diseñar la información sobre herramientas. Está escrito con un preprocesador CSS llamado Stylus. Vea las instrucciones sobre cómo puede Extiende o personaliza estos temas..
ElegantTips - Esta biblioteca viene con algunos temas pre-construidos que se puede cambiar con los nombres de clase proporcionados. A diferencia de las otras bibliotecas que se basan en HTML5. datos- o la aria-label Atributo, ElegantTips requiere un elemento adicional agregado para formar la información sobre herramientas. Esto te permite añade literalmente cualquier contenido a la información sobre herramientas más allá del texto simple.
Tootik - No solo que esta biblioteca CSS proporciona la hoja de estilo en formato CSS, MENOS y SasS, sino que también proporciona una GUI fácil de usar para personalizar la información sobre herramientas. Simplemente puede copiar y pegar el HTML generado por esta herramienta. Es así de simple.
Vainilla
TippyJS - Desarrollado por Popper.js, TippyJS viene con un Gran cantidad de opciones para configurar la información sobre herramientas.. Podemos personalizar las animaciones, la flecha de información sobre herramientas, el ancho, el tamaño, el tema y mucho más. También proporciona funciones de devolución de llamada con las que puede Ejecutar una función cuando se muestra y se oculta la información sobre herramientas.. Estas características hacen de TippyJS una de nuestras potentes bibliotecas de JavaScript en nuestra lista para crear información sobre herramientas..
Darsain Tooltip - Esta biblioteca proporciona la implementación básica de una información sobre herramientas. Aún así, proporciona amplias opciones para configurar el comportamiento de tootip, y una conjunto de nombres de clase para cambiar el aspecto de la información sobre herramientas. La información sobre herramientas funciona bien en los navegadores más antiguos como IE9 y, si es necesario, IE8 con algunos ajustes.
Bubb - Bubb puede ser adecuado para usuarios avanzados de JavaScript. Usando su APIs extensas, además de mostrar texto simple, puede agregar mediante programación un contenido HTML más complejo a la información sobre herramientas. Es genial; Puedes consultar los documentos de los ejemplos..
Corchete - Contiene una abstracción técnica para crear algo que “pops”, como una información sobre herramientas, una ventana emergente y desplegables. TippyJS lo usa como la base de la biblioteca y lo usan grandes nombres en la web como Bootstrap, Microsoft y Atlassian.
YY Tooltip - A diferencia de las otras bibliotecas, YY Tooltip no requiere que agregues un elemento HTML o atributos. Funciona completamente con JavaScript y el contenido, la posición y los colores se definen en un Objeto en lugar de en un elemento HTML. Es perfecto para ser utilizado junto con una aplicación web de JavaScript completa.
Position.js - Otra excelente biblioteca nativa de JavaScript para crear información sobre herramientas, Position.js proporciona una GUI para configurar la función y simplemente copiar y pegar el código generado allí. Position.js se puede utilizar junto con React.js o Vue.js.
Bezet Tooltip - Esta biblioteca proporciona 14 opciones para mostrar la información sobre herramientas; como en el Correcto, izquierda, fondo, izquierda centro, extremo derecho, parte inferior central, Además de eso, también es lo suficientemente inteligente como para Ajusta la posición de la descripción según el espacio disponible. rodeando la información sobre herramientas. Echa un vistazo a la demo.
MouseTip - Esta biblioteca de JavaScrtipt creará una información sobre herramientas que se moverá a lo largo de la posición del cursor. La información sobre herramientas está configurada con un no estándar. ratonera- atributo en lugar de utilizar el HTML5 datos- atributo. Mousetip está disponible como un módulo NPM.
Internetips - Muy similar a MousetTip, la información sobre herramientas generada por esta biblioteca sigue la posición del cursor. Todo está configurado a través del objeto JavaScript en lugar de HTML y el Los atributos también se construyen para los navegadores modernos.. Es ligero y rápido..
MTip - Una biblioteca de JavaScript para Tooltip con gran compatibilidad del navegador. Es compatible con IE8, totalmente personalizable a través de las Opciones, y puede agregar la Información sobre herramientas a cualquier elemento, incluso en una img (un elemento de imagen).
Bubblesee - una biblioteca de JavaScript ligera que proporciona una funcionalidad sencilla de una “información sobre herramientas”. Es fácil de usar la biblioteca de JavaScript sin opciones complicadas para personalizar la salida. Se proporciona un archivo Sass si desea cambiar el aspecto de la información sobre herramientas. Echa un vistazo a la demo.
Tipfy - Construido con la sintaxis de JavaScript moderna, ES6, Tipfy es sólo 2 KB de tamaño. La biblioteca proporciona dos versiones de archivos: tipfy.min.js proporcionando el guión con sintaxis moderna de ES6, y tipfy.es5.min.js Si necesita compatibilidad con navegadores antiguos. Usa datos- atributo para personalizar la información sobre herramientas; la lado de datos, por ejemplo, se usa para establecer la dirección de la información sobre herramientas, y usar datos-tipfy-text atributo para agregar el contenido de información sobre herramientas.
jQuery
Tooltipster - Esta biblioteca ofrece amplias opciones para personalizar casi cualquier cosa, como el Tema, animación, soporte táctil, contenido, disparador de apertura y cierre, También proporciona escucha de eventos personalizada y devoluciones de llamada que permiten a los desarrolladores ampliar la información sobre herramientas con funciones personalizadas. Además, al ser un plugin de jQuery, el La información sobre herramientas funcionaría en un navegador antiguo como IE6 dependiendo de la versión jQuery siendo utilizado.
Protip - Otro extenso plugin de jQuery, Protip soporta 49 posiciones., HTML para el contenido de información sobre herramientas, soporte de iconos, devoluciones de llamada personalizadas, y mucho más. Protip proporciona una GUI que le permite personalizar la información sobre herramientas con facilidad.
PowerTip - Este complemento de jQuery también ofrece opciones y API que brindan a los desarrolladores varias formas diferentes de implementar la información sobre herramientas. Es compatible navegación con el teclado; haciendo aparecer la ventana emergente al navegar elementos con la Lengüeta teclado. PowereTip es disponible como un módulo NPM. Se puede utilizar con RequireJS y Browserify.
Descripción de Aria accesible - Un complemento de jQuery con función de accesibilidad incorporada, la información sobre herramientas es diseñado para mostrar un cuadro de diálogo con un título, varias líneas de texto y un botón de cierre. Es uno de los suyos en nuestra lista..
ConsejosJS - Un simple plugin jQuery, sin embargo, trae características muy distintivas. los contenido de información sobre herramientas se establece con una información sobre herramientas de datos atributo. Lo que es más es que también podemos envolver el contenido con caracteres especiales para dar formato al contenido similar al formato Markdown. Nosotros podemos usar * para hacer el contenido en negrita, ~ para cursiva, y ^ para la partida.
Tooltip oscuro - Esta biblioteca proporciona algunas características realmente útiles para encender la información sobre herramientas. Por ejemplo, podemos añadir un Botón de confirmación: Sí y No, atenúa el fondo mientras se muestra la información sobre herramientas y agrega elementos HTML al contenido. Creo que realmente deberías revisar la página de demostración..
Tooltip Aria - Otra información sobre herramientas con función de accesibilidad incorporada, este complemento de jQuery es compatible con WAI-ARIA 1.1. Es sensible de una manera que puede Proporcionar diferentes configuraciones para diferentes tamaños de vista. Aria Tooltip está disponible como un módulo NPM llamado t-aria-tooltip.
Toolbar.js - Si bien el otro complemento de jQuery solo puede mostrar texto simple o contenido HTML dentro de una información sobre herramientas, este El plugin jQuery crea una barra de herramientas. La información sobre herramientas contendría dos o más enlaces con un icono que normalmente realizará una acción en hacer clic, como cualquier barra de herramientas. Echa un vistazo a la documentación y ejemplos..
VueJS
V-Tooltip - V-Tooltip es un componente Vue.js alimentado por Popper.js debajo del capó. Proporciona una nueva directiva nombrada v-tooltip que se puede agregar a cualquier elemento para crear una información sobre herramientas. los v-tooltip puede contener el contenido de información sobre herramientas o las Opciones. Aparte de la costumbre v-tooltip directiva, también puede agregar la información sobre herramientas con la v-popover componente. Con este componente, puedes añadir contenido más complejo en la información sobre herramientas con componente Vue.js o HTML.
Vue-Bulma Tooltip - Un componente Vue.js para crear información sobre herramientas basada en el marco de la interfaz de usuario de Bulma. Esta biblioteca es parte del componente de Vue Bulma. Pero el El componente de información sobre herramientas está disponible como un módulo NPM llamado vue-bulma-tooltip que puedes usar esto como componentes independientes.
Vue-Directiva-Tooltip - En general, es similar al componente V-Tooltip basado en Popper.js y proporciona la misma directiva llamada v-tooltip. Sin embargo, no parece proporcionar el v-popover componente.
Vue-Tippy - Esta biblioteca envuelve Tippy.js en un componente Vue.js. Cuenta con una directiva Vue.js personalizada llamada v-tippy que funciona como un atributo HTML; Podemos agregar contenido para información sobre herramientas o las opciones para personalizarlo. También rinde un componente Vue.js personalizado en el contenido de la información sobre herramientas utilizando el html opción.
VueJS-Popover - Un Vue.js personalizado con una directiva personalizada llamada v-popover y dos componentes personalizados a saber
Vue-Hint - Un plugin Vue.js que envuelve Hint.css. Las características del plugin. v-hint-css Directiva para agregar la información sobre herramientas. Eso trae el mismo conjunto de opciones que Hint.css, para que pueda agregarlos como un objeto JavaScript o un modificador Vue.js.
Reaccionar
Reaccionar joyride - Un componente React para mostrar un conjunto de información sobre herramientas que te guía a los nuevos usuarios para que se familiaricen con su nueva aplicación.
Reaccionar flotador - Esta biblioteca envuelve a Popper.js en un componente React llamado Floater, por lo que tiene las mismas excelentes características que Floater's. Puede agregar información sobre herramientas y ventanas emergentes, y también puede jugar con este componente a través de esta caja de arena.
React Autotip - Un componente React simple con la función de posicionamiento automático, eact Autotip Ajusta automáticamente la posición de la descripción. cuando el espacio disponible a su alrededor cambia.
Reaccionar tippy - Construido sobre Tippy.js y Popover.js. Esta biblioteca introduce una Información sobre herramientas componente que Puedes incluir en tu aplicación React..
Reaccionar sugerencia - Un componente React extendiendo Hint.css. Los componentes agregan algunas funciones que no están disponibles en Hint.css, como Posición automática, retraso y una función de devolución de llamada.
Más
Información sobre herramientas Ember - Un componente de Ember.js para crear información sobre herramientas, está construido sobre Popper.js. El componente también está diseñado teniendo en cuenta la accesibilidad y sigue mejorando para cumplir con el cumplimiento de alrededor de 508 en esta materia.
D3 Tip - un plugin D3.js. D3.js es una biblioteca de JavaScript para la visualización de datos como cuadros, mapas, diagramas, etc. Este complemento le permite mostrar información sobre herramientas sobre estos datos..
