Analice el proceso de ejecución. Mueva el mouse hacia el nodo para detectar si el nodo existe para habilitar la implementación de información sobre herramientas (nombre de clase, atributos, etc.). Detectar el tema y la ubicación (nombre de clase, atributos, etc.). burbujas para aprender de los demás.
Primero echemos un vistazo al estilo de información sobre herramientas de element-ui
Obviamente, la posición de la burbuja se agrega mediante un script javascript.
Sin más preámbulos, establezcamos algunas expectativas. No se necesitan scripts de JavaScript. La implementación de CSS puro no requiere agregar nuevos elementos** (usando pseudoelementos después y antes)** No es necesario hacer coincidir el nombre de la clase, usando directamente selectores de atributos**. ([attr ])** Admite estilo predeterminado** (cuando la etiqueta no define el tema y la posición)** Imperativo** (defínelo directamente en la etiqueta y luego déjelo en CSS para que coincida)** Use sass para implementar el tema y la posición de la burbuja Desarrollo del preprocesador (los estudiantes que no entiendan pueden convertirlo a css ) especificación de la directiva de definición html
declaración imperativa<button tooltip='Soy un pato contenido' effect='light'location='arriba-izquierda'>Arriba a la izquierda</button>
Escribe algunos botones primero.
Elemento de referencia de estilo-ui
<div class=contenedor> <div class=arriba> <botón información sobre herramientas=ubicación superior=arriba-izquierda efecto=luz>arriba a la izquierda</botón> <botón información sobre herramientas=arriba a la izquierda ubicación arriba a la izquierda=arriba>arriba</botón> < información sobre herramientas del botón=ubicación superior derecha=arriba-derecha>arriba-derecha</botón> </div> <div clase=izquierda> <botón tooltip=arriba izquierda superior izquierda superior izquierda superior izquierda superior izquierda superior izquierda superior izquierda superior izquierda superior colocación=izquierda-arriba>izquierda superior</botón> <botón tooltip=izquierda colocación=izquierda efecto=luz>izquierda</botón> < Información sobre herramientas del botón = ubicación izquierda y derecha = parte inferior izquierda >Abajo a la izquierda</botón> </div> <div clase=derecha> <botón tooltip=arriba derecha superior derecha superior derecha superior derecha superior derecha superior derecha superior derecha superior derecha superior colocación=derecha-arriba>arriba derecha</botón> <botón tooltip=derecha ubicación=derecha efecto=luz>derecha</botón> < botón información sobre herramientas=derecha ubicación inferior=derecha-abajo> Abajo derecha</botón> </div> <div clase=abajo> <botón información sobre herramientas=abajo izquierda abajo a la izquierda ubicación=abajo-izquierda>abajo izquierda</botón> <botón información sobre herramientas=ubicación inferior=efecto inferior=luz>abajo</botón> <botón información sobre herramientas=ubicación inferior derecha=abajo-derecha>abajo derecha</botón> </div></div>implementación de la lógica del código central css
hover monitorea el movimiento del mouse hacia adentro y hacia afuera, **[tooltip]** coincide con las etiquetas con este atributo, después es una burbuja y antes es un triángulo
/* Relaciona elementos con el atributo de información sobre herramientas */[tooltip] { posición: relativa; /* Estilo predeterminado de burbujas*/ &::after { display: none content: attr(tooltip } /* Estilo predeterminado de triángulos* / & ::before { display: none; content: '' } /* Mueva el mouse hacia el elemento para mostrar burbujas y triángulos */ &:hover { &::after { display: block } &::before { mostrar: bloque; } }}Ahora el efecto será efectivo después de mover el mouse hacia él.
Para ver fácilmente el efecto, la prueba puede bloquear burbujas y triángulos de forma predeterminada.
/* Estilo predeterminado de burbujas*/&::after { display: block; content: attr(tooltip);}/* Estilo predeterminado de triángulos*/&::before { display: block;El efecto actual es el siguiente.
Por supuesto, la pantalla central está configurada en posicionamiento absoluto.
/* Estilo predeterminado de la burbuja */&::after { display: block; content: attr(tooltip); posición: absoluta; desbordamiento: oculto; relleno: 8px 15px; ancho: 200px; radio del borde: 4px; sombra del cuadro: 0 10px 20px -5px rgba(0, 0, 0, 0.4); z-index: 100; @extend .tooltip-theme-dark; /* Hereda el tema predeterminado (texto blanco sobre fondo negro) */ }/* Estilo predeterminado de triángulo */&::before { display: bloque; contenido: ''; posición: absoluta; borde: 5px sólido transparente; índice z: 100; @extend .triangle-theme-dark; */}El efecto actual es el siguiente.
Definir dos temas cada uno.
$blanco: #fff;$negro: #313131;/* Tema de burbuja*/.tooltip-theme-dark { color: $blanco; color de fondo: $negro;}.tooltip-theme-light { color: $negro; color de fondo: $blanco; borde: 1px sólido $negro;}/* tema de triángulo*/.triangle-theme-dark { borde-top-color: $negro;}.triangle-theme-light { border-top-color: $black /* Igual que oscuro por ahora*/} Personaliza las posiciones de las burbujas y los triángulos (solo por ejemplo una dirección) /* Posición de la burbuja*//*----Arriba----*/.tooltip-placement-top { abajo: calc(100% + 10px); );}.tooltip-placement-arriba-derecha {abajo: calc(100% + 10px izquierda: 100%; transformar: traducir(-100%, 0)}.tooltip-placement-top-left { inferior: calc(100% + 10px izquierda: 0; transformar: traducir(0, 0)}/* posición del triángulo*//*----arriba-- --*/.triangle-placement-top { inferior: calc(100% + 5px izquierda: 50%; transformar: traducir(-50%, 0);}.triangle-placement-top-left { abajo: calc(100% + 5px); izquierda: 10px;}.triangle-placement-top-right { abajo: calc(100% + 5px;} Ubicación de captura, temaEste es también el código principal. Utilice el selector de atributos para hacer coincidir el valor en la etiqueta y luego establezca diferentes estilos.
Burbujas a juego, temas de triángulos.
&[efecto=luz] { &::después { @extend .tooltip-theme-light } &::antes { @extend .triangle-theme-light }}Combina posiciones de burbuja y triángulo, 12 posiciones
@cada $ubicación en arriba, arriba a la derecha, arriba a la izquierda, derecha, arriba a la derecha, abajo a la derecha, abajo, abajo a la derecha, abajo a la izquierda, izquierda, arriba a la izquierda, abajo a la izquierda { &[colocación=# {$ubicación}] { &::después { @extend .tooltip-placement-#{$ubicación} } &::antes { @extend .triangle-placement-#{$ubicación};Si la etiqueta no tiene un atributo de ubicación o está vacía, la posición superior se heredará de forma predeterminada.
&:not([ubicación]),&[ubicación=] { &::después { @extend .tooltip-placement-top } &::antes { @extend .triangle-placement-top }}El efecto actual es el siguiente.
Hagamos el texto más largo y agreguemos display:none a los estilos predeterminados de burbujas y triángulos.
Dividido en cuatro direcciones, arriba, abajo, izquierda y derecha, cuatro animaciones.
@keyframes anime-top { desde { opacidad: .5; abajo: 150%; .5; derecha: 150%; }}@keyframes anime-derecha { de {opacidad: .5;Haga coincidir la posición de la burbuja para determinar qué animación ejecutar. Utilice **[attr^=]** para seleccionar. Por ejemplo, la parte superior izquierda y la superior derecha también pueden coincidir.
/* Establecer animación*/@cada $ubicación en arriba, derecha, abajo, izquierda { &[ubicación^=#{$ubicación}] { &::después, &::antes { animación: anime-#{$ubicación} 300 ms hacia adelante; } }}El efecto final es el siguiente.
Adjunto la dirección de codepen codepen.io/anon/pen/yR…
ResumirLo anterior es la implementación CSS pura (sin script) del efecto de mensaje de texto de información sobre herramientas de la directiva HTML introducido por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá. tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!
Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!