es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Determinar la dirección del tooltip de Angular Material para aplicar la flecha.

15 Jul, 2023 Programación

Estoy trabajando en un proyecto de Angular v10, utilizando Angular Material. Quiero escribir estilos para mat-tooltip para darle una flecha que apunte al contenido que activa el tooltip.

Esto es lo que tengo actualmente:

enter image description here

Logré esto agregando los siguientes estilos:

.mat-tooltip.ds-tooltip {
    overflow: visible;
}

&::before {
    content     : '';
    display     : block;
    position    : absolute;
    bottom      : 100%;
    border-style: solid;
    border-color: transparent transparent black transparent;
    border-width: 12px;
    left        : calc(50% - 12px);
}

Sin embargo, esto solo funcionará cuando el tooltip esté debajo del contenido, si el tooltip se aplica en cualquier otra dirección, seguirá teniendo una flecha en la parte superior:

enter image description here

La flecha debería apuntar hacia abajo.

¿Hay alguna manera de hacer lo que estoy intentando hacer con Material? Supongo que tendría que determinar en qué dirección se coloca un tooltip y luego aplicar diferentes estilos en consecuencia, ¿hay alguna manera de hacer eso?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Estilizando el Tooltip de Angular Material con una Flecha

    Para agregar una flecha al Tooltip de Angular Material, puedes utilizar los pseudo-elementos CSS ::before y ::after. En tu código, ya has logrado esto al agregar los siguientes estilos:

    .mat-tooltip.ds-tooltip {
    overflow: visible;
    &::before {
        content     : '';
        display     : block;
        position    : absolute;
        bottom      : 100%;
        border-style: solid;
        border-color: transparent transparent black transparent;
        border-width: 12px;
        left        : calc(50% - 12px);
    }
}

    Sin embargo, como mencionaste, esto solo funciona cuando el tooltip está debajo del contenido. Para hacer que funcione en cualquier dirección, puedes determinar la ubicación del tooltip y aplicar diferentes estilos en consecuencia.

    Aquí tienes un ejemplo de código para lograr esto:

    .mat-tooltip.ds-tooltip {
    overflow: visible;
    &::before {
        content     : '';
        display     : block;
        position    : absolute;
        border-style: solid;
        border-color: transparent transparent black transparent;
        border-width: 12px;
        left        : calc(50% - 12px);
    }
    &[matTooltipPosition="above"] {
        &::before {
            bottom      : 100%;
            top         : auto;
        }
    }
    &[matTooltipPosition="below"] {
        &::before {
            bottom      : auto;
            top         : 100%;
        }
    }
    &[matTooltipPosition="left"] {
        &::before {
            left        : 100%;
            top         : calc(50% - 12px);
            transform   : rotate(90deg);
        }
    }
    &[matTooltipPosition="right"] {
        &::before {
            right       : 100%;
            top         : calc(50% - 12px);
            transform   : rotate(-90deg);
        }
    }
}

    En este código, estamos utilizando el selector de atributos para dirigirnos al tooltip con diferentes ubicaciones. También estamos utilizando la propiedad transform para rotar la flecha cuando está a la izquierda o derecha.

    Puedes ajustar el CSS según tus requerimientos de diseño específicos.

    ¡Espero que esto te sea útil!

Comments are closed.