En otras secciones de esta documentación vimos los ToolTips y
los Comentarios para posicionar e informar
que hace un determinado elemento. Ahora vamos crear nuetros propios tips con sus estilos personalizados
para mostrar la información como mejor se ajuste a las necesidades.
Es importate recalcar que esta funcionalidad lo aporta el Core de posicionamiento Dinamics Tips v1.8.0 que permite
la correcta gestión de toda la dinámica de la biblioteca.
Inicialización
Para disponer de esta funcionalidad hay que inicializar el módulo
correspondiente que permitirá el posicionamiento dinámico en donde lo definamos.
/*
Forma 1:
Si los elementos a los cuales les asociaremos
un elemento dinámico se incluyen dentro del HTML de manera
estática utilizaremos esta forma.
*/
OBJ JSON Con los siguientes attr
let conf = {
ori: "Clase del elemento Disparador", // Ej: .disparador
ele: "Clases que afectan al elemento dinámico" // EJ: bg-red c-white
}
BS.PersonalizadoInit(conf)
// BS.PersonalizeInit(conf) // Alias desde la versión 5.0.0
/**
Forma 2:
Si los elementos a los cuales queremos asociar un elemento dinámico
se incluyen dentro del HTML de forma dinámica utilizaremos esta forma.
*/
window.onload = () => {
setTimeout( () => {
BS.PersonalizadoInit(conf)
// BS.PersonalizeInit(conf) // Alias desde la versión 5.0.0
}, 100) // 100 ms de retardo
}
Para ambos casos es necesario disponer del archivo
bodystyle.min.js
una vez agregado se puede inicializar el módulo que servirá para toda la página y permitirá la carga con las clases personalizadas al elemento dinámico.
Muestra
Se toma para este ejmplo la alerta roja de la biblioteca que están documentadas en apartados anteriores en la sección de
CSS, Ver Alertas.
El botón anterior a través del evento HOVER (cuando el cursor pasa por encima del elemento) muestra
una alerta de la biblioteca, de esta forma se logra personalizar al tooltips. Es importate aclarar
que hay que definir un nombre de clase, en este caso la clase es .disparador
y agregarsela al elemento disparador, luego le pasamos como parámetro a la función de inicialización esta clase a través
del objeto JSON de la configuración.
/**
La clase disparador se tomó como ejemplo
puede ser cualquiera, lo importante es que
el Objeto Disparador tenga la misma clase que se
envía por parámmetro en el origen.
*/
BS.PersonalizadoInit({ori: "disparador", ele: "alert-op-red"})
Es importante aclarar que el attr data-info recibe código html, esto implica
que también se le pueden asignar estilos al contenido de los tooltips personalizados.
Evento Click
Lo que vimos antes fue con el evento HOVER (por default), en muchas oportunidades vamos a querer
realizar lo mismo de antes pero con el evento click, para esto le agregaremos un atributo al disparador que es
el data-evt con el valor click.
La inicialización fue hecha anteriormente, ya no es necesario inicializar el módulo nuevamente la inicialización
durará todo el tiempo que el usuario esté dentro de la página.
Posiciones
El posicionamiento puede ser (izquierda/left), (derecha/right), (arriba/top) o (abajo/bottom).
Hasta ahora vimos como crear un tips personalizado con las clases de la biblioteca pero que pasa cuando queremos
asignarle una clase seleccionada por el desarrollador (que no pertenece a biblioteca)?. Es lo veremos a continuación,
primero debemos crear una clase para poder asignarla.
Ahora nos dedicaremos a un ejemplo más complicado, de manera tal de poder
asignar un contenedor complejo a los diferentes disparadores, para esta tarea
deberemos crear un contenedor dinámico (desde JS) para después poder asignarselo
al attr data-info del disparador.
Ejemplo 1
/**
El ID que se presenta debajo es el ID del disparador necesario para
poder acceder a su data-info y configurarlo.
*/
// IMPORTANTE ESTOS USANDO jquery
// PARA ESTE EJEMPLO https://jquery.com
document.getElementById("id_disparador").setAttribute("data-info", `
Título de la tarjetaNew
Pequeña descripción
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ex et optio.
// El atributo (ele) de la configuración va vacío o inexistente (en este caso no es obligatorio).
BS.PersonalizadoInit({ori: "disparador", ele: ""}) // Notese que elemento va vacío
Ahora vamos a tratar de utilizar un elemento creado completamente con clases de la biblioteca
como objeto dinámico asociado a un elemento disparador que va a permitir mostrarlo.
Para visualizar mejor el ejemplo primero vamos a ver como se vería el objeto dinámico de forma estática.
Esto es el título
Lorem ipsum dolor sit amet consectetur adipisicing elit. strum.
// Inicializa el módulo de elementos dinámicos personalizados
// Notese que segundo parámetro para lo que vamos a hacer no es obligatorio
// El elemento disparador va a tener la clase disparador
BS.PersonalizadoInit({ori: "disparador", ele: ""})
/**
Con JQUERY le inyectamos el elemento al atributo data-info del
disparador para que esté a disposición de la lógica del posicionamiento
*/
document.getElementById("mensaje").setAttribute("data-info", `
Esto es el título
Lorem ipsum dolor sit amet consectetur adipisicing elit. strum.
En el siguiente ejemplo utilizaremos un menu muy utilizado las funcionalidades
de este apartado. El objetivo es que cuando se hace click en un botón se despliega el menú
a la derecha del botón.
A partir de la versión 5.0.0 se añade la posibilidad de desvincular la lógica
de los elementos dinámicos vistos en esta sección de la documentación para optimizar recursos.
BS.PersonalizadoDestroy()
// BS.PersonalizeDestroy() // Alias en inglés hace lo mismo
