Mejora del Comportamiento de Tooltips Interactivos

Resumen del Problema

En este artículo se presenta un problema común al trabajar con tooltips en aplicaciones JavaScript, específicamente en el contexto de Svelte. El objetivo es hacer que los tooltips sean interactivos, permitiendo que los usuarios muevan el mouse hacia el tooltip sin que este se cierre. El problema surge cuando al mover el mouse hacia el tooltip se dispara el evento mouseout del elemento padre, lo que provoca que el tooltip se cierre. Esto se debe a que el mouse sale del área del elemento original, lo que activa el evento de salida.

Solución Propuesta

Para mantener el tooltip visible cuando el mouse se mueve hacia él, es necesario ampliar las áreas activas del elemento para incluir el tooltip en su comportamiento del mouse. Para implementar esto, puedes considerar lo siguiente:

1. Modificar el Manejo de Eventos:

   • Puedes agregar un evento mouseenter en el tooltip que prevenga el cierre del tooltip al entrar en su área. Esto evita que el evento mouseout del elemento padre se dispare.
2. Uso de Elementos Ocultos:
   • Cambiar el CSS del tooltip para que tenga un área activa más amplia, podría realizarse a través de un div que se extienda visualmente, sin ser visible.

Implementación

Aquí hay un ejemplo modificado del código para incorporar la solución propuesta:

export const attachTooltip = (node, options) => {
    if (options) {
        let _component;

        node.addEventListener('mouseover', addTooltip);
        node.addEventListener('mouseout', (e) => {
            if (!tooltipContainsMouse(e)) {
                removeTooltip();
            }
        });

        function addTooltip(e) {
            const { component, ...otherOpts } = options;

            _component = new component({
                target: node,
                props: {
                    mouseEvent: e,
                    ...otherOpts
                }
            });

            const tooltip = _component.$$.ctx[0]; // Accede a la referencia del tooltip
            tooltip.addEventListener('mouseenter', () => {
                // Evitar la destrucción cuando el mouse entra en el tooltip
            });

            tooltip.addEventListener('mouseleave', removeTooltip);
        }

        function tooltipContainsMouse(event) {
            const rect = _component.$$.fragment.firstChild.getBoundingClientRect();
            return (
                event.clientX >= rect.left && 
                event.clientX <= rect.right && 
                event.clientY >= rect.top && 
                event.clientY <= rect.bottom
            );
        }

        function removeTooltip() {
            if (_component) {
                _component.$destroy();
                _component = null;
            }
        }

        return {
            destroy() {
                node.removeEventListener('mouseover', addTooltip);
                node.removeEventListener('mouseout', removeTooltip);
            }
        };
    }
}

CSS Modificado

Para asegurar que el tooltip tenga un área activa, se puede ajustar el estilo CSS:

.tip {
    pointer-events: auto; /* Permitir interacciones dentro del tooltip */
}

Conclusión

Al implementar estas modificaciones, los tooltips se vuelven interactivos y permiten que el usuario interactúe con el contenido dentro del tooltip sin que este se cierre accidentalmente al mover el mouse. Asegúrate de probar la solución en diferentes navegadores y dispositivos para garantizar la consistencia en el comportamiento del tooltip.