✨ Personalizados

Al igual que los tooltips y comentarios los tips personalizados son elementos dinámicos provenientes de la dependencia Dynamics-Tips v3.0.0 y permiten definir estilos y elementos personalizados para asociarlos a algún elemento del DOM.

Muestra

En este caso es ligeramente más complicado utilizar estos elementos ya que es necesario definir los estilos y elementos que se mostrarán como así también la información a mostrar.
Como veremos a lo largo de los apartados hay dos maneras de inicializar estos elementos, por un lado solo definiremos estilos, y por otro lado definiremos elementos completos que se posicionarán de manera adecuada utilizando el kernel de Dynamics-Tips. 

    
    

    // Inicializamos los tips personalizados indicando la clase o el 
    // origen de los elementos disparadores
    // Es importante respetar este formato para que funcione correctamente
    // Esta es una de las dos formas, no es la única
    BS.PersonalizadoInit({ori: "disparador"})


    // Nótese que seteamos el attr data-info de manera dinámica 
    // lo cual nos permitirá cargar el elemento dinámico en el attr 
    // data-info del disparador
    document.getElementById("boton1").setAttribute("data-info", 
        `
 
            

                
                

                    
Bodystyle Framework

                    
Librería CSS completa para construir interfaces modernas y responsivas con facilidad.

                

            

        

        `
    )

 Advertencia

No es recomendable inicializar varias veces los tips personalizados en la misma página ya que cuenta con dos formas, que permitirán realizar cosas distintas. Si se inicializan varias veces puede ocasionar conflictos entre ambas formas.

Posición

Al igual que los demás elementos dinámicos de Bodystyle, los tips personalizados permiten definir la posición en la cual se mostrarán. Por defecto se mostrarán en la posición "bottom" (abajo) pero podemos definir cualquiera de las otras posiciones. 

    
    


        
         
        
        
        
        
    


    document.querySelectorAll(".posicion").forEach(boton => {
        boton.setAttribute("data-info", 
            `
 
                

                    

                        
Posición: ${boton.getAttribute("data-pos")}

                        
Este tip personalizado se muestra en la posición ${boton.getAttribute("data-pos")}.

                    

                

            

            `
        )
    })

Evento Click

Al igual que los tooltips y comentarios, los tips personalizados pueden ser disparados mediante el evento click. Para ello debemos inicializarlos con la opción "evento" seteada en "click". 

     

    document.querySelector(".evento").setAttribute("data-info", 
        `
 
            

                

                    
Evento Click

                    
Este tip personalizado se muestra al hacer click en el botón.

                

            

        

        `
    )

Segunda forma

La segunda forma va a necesitar que definamos un/unas clase/s CSS que permitirán establecer el estilo que rodea a la información del tip personalizado. Luego debemos inicializar los tips personalizados indicando la clase o el origen de los elementos disparadores. 

    /* Definimos una clase personalizada para el tip */
    .mi-tip-personalizado {
        background-color: #333;
        color: #fff;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        font-size: 14px;
        max-width: 200px;
    }

    // Nótese como se envía el segundo parámetro "ele" con la clase personalizada
    // que definimos en el CSS para el tip personalizado
    // Es importante respetar el nombre de los parámetros (ori y ele) para que funcione correctamente
    BS.PersonalizadoInit({ori: "disparador", ele: "mi-tip-personalizado"});
Ver ejemplo

Accesibilidad

Los tips personalizados deben ser accesibles para todos los usuarios, incluyendo aquellos que utilizan tecnologías de asistencia como lectores de pantalla. A continuación se presentan las mejores prácticas para garantizar que tus tips sean completamente accesibles.

Atributos ARIA

Utiliza atributos ARIA para describir correctamente el propósito del elemento disparador y relacionarlo con el tip personalizado.

Navegación por Teclado

Asegúrate de que los elementos disparadores sean navegables por teclado. Utiliza tabindex si es necesario y proporciona retroalimentación visual clara. 

    
    
    

        Presiona Enter o Espacio

Contraste y Legibilidad

Garantiza suficiente contraste entre el texto y el fondo del tip. Usa colores que cumplan con las pautas WCAG AA o AAA. 

    /* Asegura contraste adecuado en el tip personalizado */
    .mi-tip-accesible {
        background-color: #1a1a1a;  /* Color oscuro */
        color: #ffffff;              /* Blanco puro */
        padding: 12px;
        border-radius: 5px;
        font-size: 16px;            /* Tamaño legible */
        line-height: 1.5;           /* Espaciado de líneas */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        border: 2px solid #4a90e2;  /* Borde distintivo */
    }

Descripciones Textuales

Si utilizas iconos o símbolos en los tips, incluye siempre una descripción textual clara. Evita depender únicamente de colores para transmitir información. 

    
    

        

            

                
                

                    
                    Advertencia Importante
                

                
Descripción clara y concisa del mensaje de advertencia.

Ejemplo Completo Accesible

    // Inicializa los tips con opciones accesibles
    BS.PersonalizadoInit({ori: "disparador"});
    
    const btn = document.getElementById("btn-info");
    
    // Actualiza aria-expanded cuando se muestra/oculta el tip
    btn.addEventListener("mouseenter", () => {
        btn.setAttribute("aria-expanded", "true");
    });
    
    btn.addEventListener("mouseleave", () => {
        btn.setAttribute("aria-expanded", "false");
    });
    
    // Soporte para teclado (Enter y Espacio)
    btn.addEventListener("keydown", (e) => {
        if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            btn.click();
        }
    });
    
    // Contenido con estructura semántica
    btn.setAttribute("data-info",
        `

            

                

                    
Información

                    
Este tip utiliza atributos ARIA y soporta navegación por teclado.

                

            

        
`
    );

 Recomendación

Prueba tus tips personalizados con herramientas de accesibilidad como WAVE, Axe, o lectores de pantalla como NVDA o JAWS para asegurar que funcionan correctamente para todos los usuarios.

Destruir

Es posible destruir los tips personalizados inicializados en la página mediante la función BS.PersonalizadoDestroy(). 

    

    const Destroy = () => {
        BS.PersonalizadoDestroy()
        BS.Toast({
            html: '✅ Tips personalizados destruidos',
            clases: ['fd-gris-az', 'c-white', 'bor-pill'],
        })
    }

Autor