Uma dica de ferramenta, tamb\u00e9m conhecida como dica de ferramenta de foco CSS<\/strong>, mostra as informa\u00e7\u00f5es do visitante quando ele move o mouse sobre um elemento espec\u00edfico.<\/p>\n Quer adicionar dicas de ferramentas ao seu WordPress tamb\u00e9m? Este guia mostra como adicionar uma dica de ferramenta no WordPress.<\/p>\n Uma dica de ferramenta \u00e9 uma pequena caixa de texto que aparece ao mover o mouse sobre uma \u00e1rea<\/strong> em um site WordPress. Essas caixas s\u00e3o \u00f3timas para adicionar informa\u00e7\u00f5es adicionais sobre o campo.<\/p>\n Mover as informa\u00e7\u00f5es para a caixa evita que o site fique superlotado.<\/p>\n Alguns os utilizam, por exemplo, em tabelas de pre\u00e7os<\/strong>. O texto fornece uma breve descri\u00e7\u00e3o e pre\u00e7os.<\/p>\n Ao passar o mouse sobre eles, os espectadores revelam uma descri\u00e7\u00e3o detalhada do item. Dessa forma, a tabela n\u00e3o fica cheia de muito texto.<\/p>\n Outros exemplos s\u00e3o defini\u00e7\u00f5es de palavras, cr\u00e9ditos de origem<\/strong>, coment\u00e1rios<\/strong> e mapas<\/strong>. Basicamente, qualquer elemento pode ser movido para uma caixa de dica de ferramenta.<\/p>\n Outros usam uma dica de ferramenta para fornecer mais informa\u00e7\u00f5es sobre uma foto ao passar o mouse sobre ela. Isso pode incluir hora, lugar, fot\u00f3grafo<\/strong> e muito mais.<\/p>\n O objetivo \u00e9 tornar um ponto mais claro ou fornecer mais informa\u00e7\u00f5es.<\/p>\n As dicas de ferramentas tamb\u00e9m s\u00e3o chamadas de termos de gloss\u00e1rio<\/strong>, dicas<\/strong> ou mensagens<\/strong>. Eles s\u00e3o \u00fateis em computadores controlados por mouse e sites e formul\u00e1rios m\u00f3veis do WordPress.<\/p>\n Isso \u00e9 importante levar em considera\u00e7\u00e3o. Grande parte da navega\u00e7\u00e3o na Internet hoje em dia \u00e9 de um dispositivo m\u00f3vel, e n\u00e3o de um computador desktop.<\/p>\n O espa\u00e7o na tela de um dispositivo m\u00f3vel \u00e9 muito mais limitado do que em uma tela grande de computador. As dicas de ferramentas s\u00e3o a resposta para esse problema.<\/p>\n No entanto, tome cuidado para n\u00e3o colocar muitas informa\u00e7\u00f5es na dica de ferramenta.<\/p>\n Existem duas maneiras de adicionar uma dica de ferramenta a um site WordPress. Este artigo ir\u00e1 discutir ambos os m\u00e9todos.<\/p>\n Primeiro, \u00e9 revisto o uso de plugins e, em seguida, o m\u00e9todo<\/strong> manual<\/strong>. O m\u00e9todo manual envolve um pouco de codifica\u00e7\u00e3o.<\/p>\n A vantagem de um plugin WordPress para adicionar dicas de ferramentas do WordPress \u00e9 que eles economizam tempo<\/strong>. Ent\u00e3o, aqui est\u00e1 uma lista de cinco plugins WordPress de dicas de ferramentas que s\u00e3o f\u00e1ceis de usar.<\/p>\n O primeiro plugin de dica de ferramenta \u00e9 o Shortcodes Ultimate. \u00c9 simples de usar e \u00e9 compat\u00edvel com a maioria dos temas populares do WordPress.<\/p>\n Ele faz mais do que adicionar dicas de ferramentas ao WordPress. Na verdade, oferece mais de 50 c\u00f3digos de acesso para uma variedade de funcionalidades, tudo de gra\u00e7a.<\/p>\n O WordPress \u00e9 f\u00e1cil de usar. \u00c9 pequeno, leve e r\u00e1pido.<\/p>\n \u00c9 uma solu\u00e7\u00e3o jQuery que adiciona conte\u00fado HTML no editor do WordPress, WYSWYG. Entre outras coisas, adiciona \u00e1udio, links de download, imagens, PDFs, conex\u00f5es de m\u00eddia social e v\u00eddeos.<\/p>\n Gloss\u00e1rio gera automaticamente listas de palavras com base no conte\u00fado de um site. Ele agrupa as palavras e defini\u00e7\u00f5es em um dicion\u00e1rio.<\/p>\n As palavras e defini\u00e7\u00f5es s\u00e3o ent\u00e3o vinculadas \u00e0s palavras na c\u00f3pia. Em seguida, ele cria o gloss\u00e1rio de dicas de ferramentas para ele.<\/p>\n Isso permite que os usu\u00e1rios adicionem dicas de ferramentas ao texto simples e aos links correspondentes na postagem ou no site. Ele usa a interface gr\u00e1fica do usu\u00e1rio de shortcode TinyMCE.<\/p>\n Ele orienta o usu\u00e1rio durante todo o processo. Portanto, amplo conhecimento de codifica\u00e7\u00e3o n\u00e3o \u00e9 necess\u00e1rio.<\/p>\n Isso simplesmente adiciona um bot\u00e3o extra ao editor de postagem. Clicar nesse bot\u00e3o insere um c\u00f3digo de atalho de dica de ferramenta no conte\u00fado.<\/p>\n Em seguida, os usu\u00e1rios adicionam conte\u00fado \u00e0 dica de ferramenta e atribuem o elemento que aciona a dica de ferramenta.<\/p>\n Em seguida, o foco muda para o m\u00e9todo CSS manual.<\/p>\n A se\u00e7\u00e3o anterior discutiu o uso de um plugin WordPress para adicionar dicas de ferramentas a um site WordPress. O que os plugins fazem nos bastidores \u00e9 definir v\u00e1rios estilos CSS.<\/p>\n Em seguida, ele permite que o usu\u00e1rio escolha entre um conjunto de configura\u00e7\u00f5es para personalizar a dica de ferramenta. O plugin ir\u00e1 ent\u00e3o gerar o shortcode.<\/p>\n Claro, \u00e9 poss\u00edvel realizar todas essas tarefas manualmente. Requer conhecimento avan\u00e7ado de HTML e jQuery<\/strong>.<\/p>\n Quando o c\u00f3digo j\u00e1 est\u00e1 gerado, \u00e9 s\u00f3 adicionar isso.<\/p>\n O truque adicional \u00e9 a adi\u00e7\u00e3o de CSS<\/strong> ao tema. A maneira mais f\u00e1cil de fazer isso \u00e9 usando o WordPress Customizer.<\/p>\n Isto \u00e9 o que as tr\u00eas classes CSS precisam fazer:<\/p>\n Este c\u00f3digo que faz essas coisas ser\u00e1 algo assim:<\/p>\n Essas sequ\u00eancias de c\u00f3digo geram uma caixa vazia e a posicionam em rela\u00e7\u00e3o ao texto pai. Em seguida, ele comp\u00f5e o texto e define par\u00e2metros como alinhamento, cor e preenchimento.<\/p>\n A parte final oculta a caixa at\u00e9 que ela precise aparecer ao passar o mouse sobre o elemento pai.<\/p>\n Depois de adicionar as classes CSS ao tema, certifique-se de salv\u00e1-las. Agora as dicas de ferramentas do WordPress est\u00e3o prontas para serem adicionadas aos sites do WordPress.<\/p>\n Para adicion\u00e1-los:<\/p>\n Altere o nome se ele recebeu um nome diferente quando foi adicionado.<\/p>\n Estilize as dicas de ferramentas do WordPress<\/strong> da mesma maneira que outros elementos CSS.<\/p>\n Altere a cor, personalize a caixa e assim por diante. Fa\u00e7a com que se encaixe com o resto do design do site.<\/p>\n As dicas de ferramentas do WordPress s\u00e3o \u00f3timas para adicionar informa\u00e7\u00f5es extras, sem atrapalhar a apar\u00eancia visual.<\/p>\n Se um visitante n\u00e3o passar o mouse sobre um elemento espec\u00edfico do site, as informa\u00e7\u00f5es n\u00e3o estar\u00e3o vis\u00edveis. Isso aumenta a experi\u00eancia do usu\u00e1rio.<\/p>\n A apar\u00eancia limpa e organizada est\u00e1 se tornando cada vez mais importante. Mais pessoas usam dispositivos m\u00f3veis para navegar na internet.<\/p>\n Em uma tela pequena, os pop-ups s\u00e3o muito irritantes.<\/p>\n Por outro lado, os visitantes apreciam dicas de ferramentas. Eles aparecem quando necess\u00e1rio e informam em vez de tentar vender.<\/p>\n As duas abordagens para adicionar dicas de ferramentas a um site WordPress discutidas neste artigo s\u00e3o:<\/p>\n Isso requer a adi\u00e7\u00e3o de tr\u00eas estilos CSS ao tema. O guia mostrou como usar o personalizador para fazer isso.<\/p>\n Se voc\u00ea gostou de ler este artigo sobre como adicionar dicas de ferramentas do WordPress, confira este artigo sobre como excluir temas do WordPress<\/a>.<\/p>\n Tamb\u00e9m escrevemos sobre alguns assuntos relacionados, como como marcar imagens com marca d’\u00e1gua<\/a>, como verificar a vers\u00e3o do WordPress<\/a>, criar uma tabela de compara\u00e7\u00e3o com plugins do WordPress<\/a>, como fazer upload de um arquivo HTML no WordPress<\/a>, onde s\u00e3o armazenadas as p\u00e1ginas do WordPress<\/a> e por que o WordPress \u00e9 t\u00e3o dif\u00edcil de usar<\/a>.<\/p>\nO que \u00e9 um WordPress ou CSS Hover Tooltip?<\/h2>\n
![\"Tutorial](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-187133-61e88fb3268a3.jpg\")
<\/a><\/p>\nAdicionar uma dica de ferramenta do WordPress com um plug-in<\/h2>\n
C\u00f3digos de acesso final<\/h3>\n
<\/a><\/p>\nDicas de ferramentas do WordPress<\/h3>\n
<\/a><\/p>\nGloss\u00e1rio<\/h3>\n
<\/a><\/p>\nDica de ferramenta do WordPress<\/h3>\n
<\/a><\/p>\nPlug-in de dicas de ferramentas simples<\/h3>\n
<\/a><\/p>\nAdicionar manualmente uma dica de ferramenta do WordPress<\/h2>\n
V\u00e1 para o personalizador de temas<\/h3>\n
<\/a><\/p>\n\n
\n
Adicionar classes CSS ao tema<\/h3>\n
\n
.tooltip {\nposition: relative;\ndisplay: inline-block;\nborder-bottom: 1px dotted\nblack;}\n\n.tooltip .tooltiptext {\nvisibility: hidden;\nwidth: 120px;\nbackground-color: black;\ncolor: #fff;\ntext-align: center;\nborder-radius: 6px;\npadding: 5px 0;\n\n\/* Position the tooltip *\/\nposition: absolute;\nz-index: 1;}\n\n.tooltip:hover .tooltiptext {\nvisibility: visible;}<\/code><\/pre>\nAdicionar dicas de ferramentas usando o Editor de blocos<\/h2>\n
<\/a><\/p>\n\n
<div\n\nclass=\"tooltip-text\">Parent text\n\n\u00a0 <span class=\"tooltiptext\">Tooltip\n\ntext here!<\/span>\n\n<\/div><\/code><\/pre>\n\n
<\/a><\/p>\n<\/a><\/p>\n\n
<\/a><\/p>\nConsidera\u00e7\u00f5es finais sobre como adicionar dicas de ferramentas do WordPress<\/h2>\n
\n