Comentarios

Elementos dinámicos que se utilizan para describir un elemento dentro del DOM, es similar al ToolTips. Se basa en el mismo núcleo de posicionamiento utilizado por los tooltips provisto por dynamics-tips 1.8.0 que puede descargase a partir del siguiente enlace dynamics-tips 1.8.0.
La diferencia con los tooltips radica en la cantidad de texto suministrado, los comentarios son capaces de contener bastante más contenido que los tooltips.

Inicialización de Comentarios

Es necesario inicializar el mmódulo de JS para utilizar los comentarios dinámicos, para ello es indispensable disponer del archivo bodystyle.min.js agregado a la página en desarrollo. Como se mencionó en varias oportunidades hay diferentes formas de realizar esta tarea, pero por simplicidad en este artículo se mostrará como agregar el archivo a través de si CDN.
En caso de que el elemento/s al que se le quiere asignar el comentario son dinámicos (Se inyectan a través de js pero no existen como tal en el HTML) va a ser necesario inicializarlo manualmente con las funciones provista por la biblioteca. 
    window.onload = () => {
        // se define un timeout para generar un retraso 
        // en la inicialización del comentario 

        setTimeout( () => {

            BS.CommentInit() // Con este código se podrá mostrar el comentario 
            // en cualquier elemento sea dinámico o estático.

        }, 100) // 100ms

    }
Desde la versión 5.0.0 se incorpora la función automática de inicialización que se utiliza para cargar los Dropdown, Tooltips y Comentarios, estos tres elementos serán inicializados con una única función. 
    window.onload = () => {
        // se define un timeout para generar un retraso 
        // en la inicialización del comentario 

        setTimeout( () => {

            BS.DynamicsAutoInit() // Con este código se podrá mostrar el comentario 
            // en cualquier elemento sea dinámico o estático.

        }, 100) // 100ms
    }

Muestra

Ahora veamos una muestra de como utilizar un comentario con mucho texto en un elemento del DOM, en este caso utilizaremos un botón pero puede ser cualquier otro.
La clase utilizada para agregar al elemento es .com-trigger que la va a contener el elemento que se quiere describir, luego es necesario defir el atributo data-info que va a permitir configurar la información a mostrar.

Posicionamiento

es posible posicionar el comentario en cuatro posiciones predefinidas, arriba, abajo, a la izquierda y a la derecha. Para esta tarea se utiliza el atributo data-pos que permite definir este parámetro.
Es oimportante aclarar que si el elemento dinámico no encuentra lugar el mismo se ubicará automaticamente en una posición diferente a la seleccionada buscando espacio donde pueda mostrarse correctamente.

Eventos

Se desencadenar el evento para mostrar el comentario a través del evento HOVER que los estuvimos viendo anteriormente ya que se ejecuta por defecto o a través del evento click el cual puede configurarse a través del atributo data-evt como se muestra a continuación.

Método Destroy

Para liberar recursos y desasignar eventos es necesario destruir los comentarios, para esta tarea Bodystyle cuenta con una función que realiza esto. 

        // Con esta función de deshabilitan los comentarios
        BS.CommentDestroy()
Notará que después de presionar el botón "Desactivar Comentarios" los comentarios de la página dejaron de funcionar. 
        document.getElementById("desactivador").addEventListener("click", () => {
            BS.CommentDestroy()
            BS.Toast({html: "Comentarios Destruidos", clases: ["bg-red"]})
        })
`r`n