Implementação de CSS puro (sem script) Efeito de prompt de texto de dica de ferramenta imperativa HTML

Analise o processo de execução. Mova o mouse para o nó para detectar se o nó existe para habilitar a implementação da dica de ferramenta (nome da classe, atributos, etc.). Detecte o tópico e a localização (nome da classe, atributos, etc.). bolhas para aprender com os outros.

Vamos primeiro dar uma olhada no estilo da dica de ferramenta do element-ui

Obviamente, a posição da bolha é adicionada através de script javascript

Sem mais delongas, vamos definir algumas expectativas. Nenhum script JavaScript é necessário. A implementação de CSS puro não requer adição de novos elementos** (usando pseudo-elementos antes e depois)** Não há necessidade de correspondência de nome de classe, usando diretamente seletores de atributos** ([attr ])** Suporta estilo padrão** (quando a tag não define o tema e a posição)** Imperativo** (defina-o diretamente na tag e deixe-o em css para correspondência)** Use sass implementar o tema e a posição do desenvolvimento do pré-processador de bolha (alunos que não entendem podem convertê-lo para css ) especificação da diretiva de definição html

 <button tooltip='Eu sou um pato de conteúdo' effect='light' posicionamento='top-left'>Canto superior esquerdo</button> 

• dica de ferramenta — o conteúdo exibido pelo balão;
• efeito — o tema da bolha (escuro/claro), padrão escuro;
• posicionamento — a posição da bolha em relação ao elemento pai (superior / superior esquerdo/ superior direito / direito / superior direito/ inferior direito...), topo padrão;

Escreva alguns botões primeiro

Elemento de referência de estilo-ui

 <div class=container> <div class=top> <button tooltip=top posicionamento=top-left effect=light>canto superior esquerdo</button> <button tooltip=topo esquerdo canto superior esquerdo posicionamento=top>topo</button> < botão tooltip=canto superior direito posicionamento=topo direito>canto superior direito</button> </div> <div class=esquerda> <botão tooltip=canto superior esquerdo canto superior esquerdo canto superior esquerdo canto superior esquerdo canto superior esquerdo canto superior esquerdo canto superior esquerdo posicionamento=topo esquerdo>superior esquerdo</button> <button tooltip=left posicionamento=esquerdo effect=light>esquerdo</button> < button tooltip=esquerda e direita posicionamento=esquerda-inferior >Inferior esquerdo</button> </div> <div class=right> <button tooltip=canto superior direito canto superior direito canto superior direito canto superior direito canto superior direito canto superior direito canto superior direito posicionamento=direita-topo>canto superior direito</button> <button tooltip=direita posicionamento=direita effect=light>direita</button> < botão tooltip=direita inferior posicionamento=right-bottom> Inferior direito</button> </div> <div class=bottom> <button tooltip=inferior esquerdo inferior esquerdo posicionamento=bottom-esquerdo>inferior esquerdo</button> <button tooltip=bottom posicionamento=bottom effect=light>inferior</button> <button tooltip=bottom direito posicionamento=bottom-right>canto inferior direito</button> </div></div>

o foco monitora o movimento do mouse para dentro e para fora, **[dica]** corresponde aos rótulos com este atributo, depois é uma bolha e antes é um triângulo

 /* Combine elementos com o atributo de dica de ferramenta */[dica de ferramenta] { posição: relativo; /* Estilo padrão de bolhas*/ &::after { display: none; attr(tooltip ); / & ::before { display: none; content: '' } /* Mova o mouse sobre o elemento para exibir bolhas e triângulos */ &:hover { &::after { display: block; exibição: bloco; }}

Agora o efeito será eficaz após mover o mouse sobre ele

Para ver facilmente o efeito, o teste pode usar bolhas e triângulos padrão para bloquear.

 /* Estilo padrão de bolhas*/&::after { display: block; content: attr(tooltip);}/* Estilo padrão de triângulos*/&::before { display: block;

O efeito atual é o seguinte

A tela principal está obviamente configurada para posicionamento absoluto

 /* Estilo padrão da bolha */&::after { display: block; padding: 8px 15px; largura: 200px; raio da borda: 4px; sombra da caixa: 0 10px 20px -5px rgba (0, 0, 0, 0,4); z-index: 100; @extend .tooltip-theme-dark; /* Herda o tema padrão (texto branco sobre fundo preto) */ }/* Estilo padrão do triângulo */&::before { display: bloco; conteúdo: ''; posição: absoluta; borda: 5px sólido transparente; @extend .triangle-theme-dark; */}

O efeito atual é o seguinte

Defina dois temas cada

 $white: #fff;$black: #313131;/* Tema bolha*/.tooltip-theme-dark { color: $white; background-color: $black;}.tooltip-theme-light { color: $black; cor de fundo: $branco; borda: 1px sólido $preto;}/* tema triângulo*/.triangle-theme-dark { border-top-color: $black;}.triangle-theme-light { border-top-color: $black; /* O mesmo que escuro por enquanto*/}

 /* Posição da bolha*//*----Top----*/.tooltip-placement-top { bottom: calc(100% + 10px left: 50%; transform: translate(-50%, 0); );}.tooltip-placement-top-right { inferior: calc(100% + 10px); esquerda: 100%; 0)}.tooltip-placement-top-left { bottom: calc(100% + 10px); left: 0; transform: translate(0, 0)}/* posição do triângulo*//*----top-- --*/.triangle-placement-top { bottom: calc(100% + 5px); esquerda: 50%; transform: translate(-50%, 0);}.triangle-placement-top-left { inferior: calc(100% + 5px); esquerda: 10px;}.triangle-placement-top-right { inferior: calc(100% + 5px direita: 10px;}

Este também é o código principal. Use o seletor de atributos para corresponder ao valor no rótulo e defina estilos diferentes.

Bolhas correspondentes, temas triangulares

 &[efeito=light] { &::after { @extend .tooltip-theme-light } &::before { @extend .triangle-theme-light }}

Combine as posições da bolha e do triângulo, 12 posições

 @each $posição em cima, canto superior direito, canto superior esquerdo, direita, canto superior direito, fundo direito, fundo, canto inferior direito, canto inferior esquerdo, esquerda, canto superior esquerdo, fundo esquerdo { &[placement=# {$placement}] { &::after { @extend .tooltip-placement-#{$placement} } &::before { @extend .triangle-placement-#{$placement};

Se o rótulo não tiver um atributo de posicionamento / estiver vazio, a posição superior será herdada por padrão.

 &:not([placement]),&[placement=] { &::after { @extend .tooltip-placement-top } &::before { @extend .triangle-placement-top }}

O efeito atual é o seguinte

Vamos tornar o texto mais longo e adicionar display:none aos estilos padrão de bolhas e triângulos.

Dividido em quatro direções, para cima, para baixo, para a esquerda e para a direita, quatro animações

 @keyframes anime-top { de { opacidade: 0,5; inferior: 150% }}@keyframes anime-bottom { de { opacidade: 0,5; 0,5; direita: 150% }}@keyframes anime-direita { de { opacidade: 0,5;

Combine a posição da bolha para determinar qual animação executar Use **[attr^=]** para selecionar. Por exemplo, o canto superior esquerdo e o canto superior direito também podem ser combinados.

 /* Definir animação*/@cada $posição na parte superior, direita, inferior, esquerda { &[placement^=#{$placement}] { &::after, &::before { animação: anime-#{$placement} 300 ms de avanço; } }}

O efeito final é o seguinte

Em anexo está o endereço codepen codepen.io/anon/pen/yR…

O texto acima é a implementação CSS pura (sem script) do efeito de prompt de texto da diretiva HTML introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a você. tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!

Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!