Tooltips

Elementos dinámicos que permiten guiar y brindarle información al usuario sobre un determinado elemento dentro del DOM. Este elemento mejora sustancialmente la experiencia de usurio ya que entodo momento el mismo sabrá los que significa cada una de las cosas que conforman el sitio o aplicación web.
Este elemento pertenece al Core de bodystyle y se puede contar con el a través de la dependencia Dynamics-Tips que puede descargarse desde Dynamics-Tips 1.8.0.

ToolTips Iniciación

Como toda funcionalidad dinámica de la biblioteca hay que inicializar el módulo que hace posible su funcionamiento. Lo primero es tener agregada la biblioteca de JavaScript de la biblioteca Bodystyle a través de métodos definidos en
Get Started.
La forma más simple es agregar la lógica de Bodystyle es a través de su CDN.
Notese en el código anterior que se añadió una función de inicialización para iniciar a todos los elementos dinámicos provistos por Bodystyle. En las situaciones en las cuales se necesite utilizar (Dropdown, Tooltips y Comentarios) la función los inicializará permitiendo su uso. En los casos que no se necesiten todos, la recomendación es hacer manualmente cada uno de ellos.

Muestra

Podemos añadirle tips explicativos y descriptivos a cualquier elemento del DOM, en este caso lo voy a hacer con un botón de la biblioteca como muestra de su funcionamiento.

Posicionamiento

Dynamics-Tips está compuesto por un núcleo de posicionamiento, el cual a través de las condiciones en la cuales se quiera mostrar el elemento va a elegir donde ubicarse aprovechando el espacio de manera óptima.
A pesar de esto es posible a través de un atributo data-pos establecer la posición del tooltips que por defecto es botton. Aclaración: Si se intenta ubicar un tips en una posición en la que no hay espacio, el elemento va a buscar el espacio en otra posición de manera tal de presentarse adecuadamente al usuario.

Para añadirle un tips a un elemento hay que agregarle la clase .tips-ele y luego definir el contenido a mostrar a través del atributo data-tips y luego, si lo desea puede configurar la posición a través del atributo data-pos.

Tips y Html

Como vimos anteriormente en el atributo data-tips enviamos el texto que queremos que se muestra en el tips, pero no habíamos mencionado que este texto en realidad no es texto plano sino html, lo cual brinda muchas más posibilidades para su edición utilizando las clases pertinentes para mejorar su visual.
Podemos utilizar todas las clases provistas por la biblioteca pertenecientes a la sección Texto de esta documentación, como así tambien iconos de fuentes provistas por ejemplo por FontAwesome.

Tips Eventos

Hasta el momento vimos un solo evento que produce cuando el usuario pasa el cursor por encima del elemento que se configura por default. Ahora vamos a ver que podemos utilizar el mismo concepto por el evento click (cuando el usuario le daclick al elemento).

Para habilitar el evento click debemos añadir el atributo data-evt para indicarle que el tips va a mostrarse con el disparador click.

Mostrar en Elementos Dinámicos

Este artículo es sobre un caso posible que se puede dar durante el desarrollo de cualquier proyecto.
Si queremos que un tooltips haga referencia a un determinado elemento del DOM que se añade al mismo dinámicamente (A través de JS) y no se encuentra fisicamente en el DOM cuando se renderiza la página es necesario inicializar el módulo de los tooltips de otra manera. 
        /** 
            Este código debe ir dentro de las etiquetas script de html 
            justo debajo la inicialización de la biblioteca bodystyle.min.js.

            Haciendo esto podemos añadirle los tootips a cualquier elemento estático o 
            dinámico.
        */
        window.onload = () => {
        setTimeout( () => {
            BS.ToolTipsInit();
            }, 50); 
        }

Destroy

Es posible inhabilitar los tooltips desvinculado la lógica de fondo con los elementos asociados a través de la función destroy que provee Bodystyle. 

        // Esta linea de código utlizada dentro 
        // de dos etiquetas script de html 
        // desvincula los tooltips de los elementos referenciados
        BS.ToolTipsDestroy()

        // BS.DynamicsAutoDestroy() // Mata a todos los elementos dinámicos 
        // Dropdown, Comentarios y Tooltips
Notará que después de presionar el botón "Desactivar Tips" los tips de la página dejaron de funcionar. 
        document.getElementById("desactivador").addEventListener("click", () => {
            BS.ToolTipsDestroy()
            BS.Toast({html: "Tips Destruidos", clases: ["bg-red"]})
        })
`r`n