{"id":260659,"date":"2022-12-23T11:14:00","date_gmt":"2022-12-23T08:14:00","guid":{"rendered":"https:\/\/inform.click\/criando-uma-dica-de-ferramenta-usando-css\/"},"modified":"2022-12-23T11:48:00","modified_gmt":"2022-12-23T08:48:00","slug":"criando-uma-dica-de-ferramenta-usando-css","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/criando-uma-dica-de-ferramenta-usando-css\/","title":{"rendered":"Criando uma dica de ferramenta usando CSS"},"content":{"rendered":"

\n Voc\u00ea provavelmente j\u00e1 sabe o que \u00e9 uma dica de ferramenta.\n<\/p>\n

\n Uma dica de ferramenta \u00e9 um \u00edcone ou texto que, ao passar o mouse, nos fornece mais informa\u00e7\u00f5es em uma bolha ou pop-up.\n<\/p>\n

\n Voc\u00ea normalmente encontra dicas de ferramentas em formul\u00e1rios, mas pode coloc\u00e1-las sempre que os usu\u00e1rios precisarem de mais informa\u00e7\u00f5es.\n<\/p>\n

\n Na imagem acima, o c\u00edrculo com o ponto de interroga\u00e7\u00e3o mostra uma dica de ferramenta<\/strong>. Ao passar o mouse sobre ela, esta dica de ferramenta fornece mais informa\u00e7\u00f5es sobre os tipos de caracteres que sua senha deve incluir.\n<\/p>\n

\n Voc\u00ea pode obter estruturas para implementar dicas de ferramentas em seu site, mas, na maioria das vezes, essas estruturas usam JavaScript para fazer isso.\n<\/p>\n

\n Neste artigo, aprenderemos como criar tooltips usando apenas CSS<\/strong> de forma relativamente simples.\n<\/p>\n

\n Antes de come\u00e7armos, o arquivo HTML e CSS final para implementar a dica de ferramenta est\u00e1 dispon\u00edvel no final deste blog<\/strong>. Descrevemos em detalhes cada elemento usado em HTML e CSS para implementar a dica de ferramenta da maneira mais f\u00e1cil poss\u00edvel.\n<\/p>\n

\n Voc\u00ea poder\u00e1 implementar o recurso de dica de ferramenta em qualquer site usando apenas HTML e CSS, depois de passar por este artigo.\n<\/p>\n

\n Ent\u00e3o vamos come\u00e7ar\u2026\n<\/p>\n

\n Come\u00e7aremos criando uma p\u00e1gina HTML simples solicitando uma senha.\n<\/p>\n

\n Etapa 1: Criando uma p\u00e1gina HTML simples para exibir dica de ferramenta
\n<\/h5>\n

\n Aqui est\u00e1 o c\u00f3digo HTML b\u00e1sico para a p\u00e1gina do formul\u00e1rio<\/strong> ,\n<\/p>\n

\n\n\n<\/code><\/pre>\n
<\/p>\n
\n<\/pre>\n
<br \/>\n  Awesome CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<p>\n  <code>Como voc\u00ea pode ver, vinculamos nosso arquivo \" <strong>style.css<\/strong> \" no html acima.<\/code>\n<\/p>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<p>\n  <code>Estaremos criando a dica de ferramenta usando este arquivo CSS.<\/code>\n<\/p>\n<p>\n  <code>Usamos um <strong>formul\u00e1rio simples<\/strong> para experimentar a fun\u00e7\u00e3o de dica de ferramenta. Este formul\u00e1rio possui apenas um campo rotulado como \" <strong>Senha<\/strong> \", pois o estamos usando apenas para ilustrar como as dicas de ferramentas funcionam.<\/code>\n<\/p>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> <\/pre>\n<p>\n  <code>Usamos a classe \" <strong>tooltip<\/strong> \" para implementar o recurso de dica de ferramenta usando CSS. Discutiremos isso na pr\u00f3xima se\u00e7\u00e3o.<\/code>\n<\/p>\n<h5>\n  <code>Passo 2: Estilos b\u00e1sicos de CSS para nossa p\u00e1gina HTML<\/code><br \/>\n<\/h5>\n<p>\n  <code>Antes de criar o CSS para \"tooltip\", devemos criar alguns <strong>estilos b\u00e1sicos de CSS para nossa p\u00e1gina html<\/strong>.<\/code>\n<\/p>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}<\/code><\/code><\/pre>\n<p>\n  Isso fornecer\u00e1 uma p\u00e1gina html com um belo fundo verde. Tamb\u00e9m selecionamos a fonte verdana e a cor da fonte como branco.\n<\/p>\n<pre><code>form{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}<\/code><\/pre>\n<p>\n  Posicionamos o formul\u00e1rio “relativamente”, com largura m\u00e1xima de 600 pixels e margem de 20%.\n<\/p>\n<pre><code>Formlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}<\/code><\/pre>\n<p>\n  A classe de r\u00f3tulo de formul\u00e1rio \u00e9 para especificar o tamanho da fonte e o espa\u00e7amento entre letras para o texto do r\u00f3tulo que usaremos.\n<\/p>\n<pre><code>forminput{\nmargin: 0 10px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #444;\n}<\/code><\/pre>\n<p>\n  Aqui, temos os estilos para o campo do formul\u00e1rio. N\u00e3o h\u00e1 nada complicado sobre esse estilo. Fornecemos uma <strong>margem<\/strong> e <strong>preenchimento<\/strong> apropriados, al\u00e9m de <strong>especificar o tamanho<\/strong> e <strong>a cor<\/strong> da fonte para os campos do formul\u00e1rio.\n<\/p>\n<p>\n  Ent\u00e3o, esses s\u00e3o nossos estilos CSS padr\u00e3o para nossa p\u00e1gina de formul\u00e1rio, que usaremos para demonstrar como implementar o recurso de dica de ferramenta usando CSS.\n<\/p>\n<h3>\n  Vamos criar dica de ferramenta usando CSS<br \/>\n<\/h3>\n<h5>\n  Etapa 4: estilo CSS para dica de ferramenta<br \/>\n<\/h5>\n<p>\n  Voc\u00ea deve ter notado que usamos a classe ” <strong>tooltip<\/strong> ” em nosso arquivo html. Este \u00e9 o estilo que vamos aplicar para o sinal de interroga\u00e7\u00e3o (“?”) que atuar\u00e1 como nossa dica de ferramenta.\n<\/p>\n<pre><code>.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}<\/code><\/pre>\n<p>\n  Temos que primeiro posicionar a dica de ferramenta relativamente aplicando ” <strong>position: related;<\/strong> ” estilo. O motivo do posicionamento relativo da dica de ferramenta \u00e9 que usaremos <strong>pseudoelementos<\/strong> posteriormente neste m\u00e9todo, que podem ser posicionados como “Absolutos”. Portanto, queremos essas pseudoclasses “absolutas” posicionadas relativamente a esse elemento.\n<\/p>\n<p>\n  Em seguida, estamos dando uma <strong>cor de fundo preta<\/strong> para a dica de ferramenta usando o m\u00e9todo rgba(),\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  em que r,g,b significa vermelho, verde e azul e a significa ‘ <strong>alfa<\/strong> ‘ que <strong>controla a opacidade<\/strong>.\n<\/p>\n<p>\n  Daremos um fundo preto ao nosso c\u00edrculo de dica de ferramenta e reduziremos sua opacidade para 0,3 para torn\u00e1-lo semelhante a uma <strong>cor verde escura<\/strong>.\n<\/p>\n<p>\n  Em seguida, aplicaremos alguns estilos b\u00e1sicos de preenchimento e raio de borda ao sinal de interroga\u00e7\u00e3o (“?”) para deixar nossa dica de ferramenta com uma boa apar\u00eancia.\n<\/p>\n<pre><code>padding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;<\/code><\/pre>\n<p>\n  Com o CSS acima, estamos aplicando padding ao c\u00edrculo envolvendo o “?”, e tornando o border-radius 100% para torn\u00e1-lo um c\u00edrculo completo.\n<\/p>\n<p>\n  O tamanho da fonte determina o tamanho de “?” sign, que usamos como nossa dica de ferramenta neste exemplo.\n<\/p>\n<p>\n  Tamb\u00e9m estamos adicionando ” <strong>cursor:help;<\/strong> ” no CSS, isso dar\u00e1 um sinal de interroga\u00e7\u00e3o sob o ponteiro do mouse quando voc\u00ea passar o mouse sobre esse elemento, conforme mostrado na imagem abaixo.\n<\/p>\n<p>\n  A dica cont\u00e9m algum conte\u00fado (neste exemplo estamos dando mais informa\u00e7\u00f5es sobre os caracteres que devem ser inclu\u00eddos no campo “senha”).\n<\/p>\n<h5>\n  Passo 5: Forne\u00e7a o conte\u00fado para dica de ferramenta dentro do HTML<br \/>\n<\/h5>\n<p>\n  O pr\u00f3ximo desafio diante de n\u00f3s \u00e9: onde colocar esse conte\u00fado dentro da dica de ferramenta?\n<\/p>\n<p>\n  Para realizar esta tarefa, vamos adicionar um <strong>atributo<\/strong> no arquivo HTML que criamos anteriormente.\n<\/p>\n<pre><code><span class=\"tooltip\">?<\/span><\/code><\/pre>\n<p>\n  Aqui, n\u00e3o queremos adicionar nenhuma marca\u00e7\u00e3o extra, como criar outro span para adicionar o conte\u00fado dentro da dica de ferramenta.\n<\/p>\n<p>\n  Podemos incluir o conte\u00fado da dica de ferramenta nesse intervalo.\n<\/p>\n<p>\n  Faremos isso adicionando um atributo ” <strong>data<\/strong> “. O nome do atributo de dados aqui ser\u00e1 ” <strong>dica de ferramenta<\/strong> “.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"\">?<\/span><\/code><\/pre>\n<p>\n  <strong>data-tooltip<\/strong> \u00e9 o nosso atributo de dados com o qual adicionamos o conte\u00fado que deve ser exibido dentro da dica de ferramenta.\n<\/p>\n<p>\n  A seguir, vamos adicionar as instru\u00e7\u00f5es referentes ao caractere que deve estar presente na senha, dentro do nosso atributo data-tooltip.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  Agora adicionamos <strong>o texto<\/strong> que deve aparecer dentro da dica de ferramenta. A seguir, aprenderemos como <strong>fazer esse texto aparecer dentro da dica de ferramenta<\/strong> quando o usu\u00e1rio passar o mouse sobre o sinal de interroga\u00e7\u00e3o.\n<\/p>\n<h5>\n  Etapa 6: Criando um Cont\u00eainer de Dica de Ferramenta Usando Pseudoelementos<br \/>\n<\/h5>\n<p>\n  Primeiro, precisamos criar os cont\u00eaineres dentro dos quais o conte\u00fado da dica de ferramenta deve ser exibido.\n<\/p>\n<p>\n  Para fazer isso, vamos voltar ao arquivo style.css e criar <strong>pseudo-elementos<\/strong> para a classe <strong>.tooltip<\/strong>.\n<\/p>\n<p>\n  Vamos criar as pseudoclasses <strong>::after<\/strong> e <strong>::before para fazer aparecer o conte\u00fado do nosso tooltip.<\/strong>\n<\/p>\n<p>\n  Basicamente, usando uma pseudoclasse como ” <strong>::after<\/strong> ” voc\u00ea pode direcionar uma posi\u00e7\u00e3o logo ap\u00f3s o elemento que usa a classe principal e estilizar essa posi\u00e7\u00e3o.\n<\/p>\n<p>\n  Da mesma forma, usando a pseudoclasse ::before voc\u00ea pode estilizar a posi\u00e7\u00e3o imediatamente antes do elemento onde a classe principal \u00e9 usada (neste caso “?” \u00e9 esse elemento).\n<\/p>\n<p>\n  \u00c9 uma pseudo classe muito \u00fatil para injetar conte\u00fado extra em uma p\u00e1gina.\n<\/p>\n<p>\n  Vamos criar uma pseudoclasse para “tootlip” conforme mostrado abaixo.\n<\/p>\n<pre><code>.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\n}<\/code><\/pre>\n<p>\n  Estamos criando uma classe comum para os estilos ::before e ::after.\n<\/p>\n<p>\n  Aqui, posicionamos <strong>absolutamente<\/strong> os estilos ::before e ::after, porque queremos que eles sejam posicionados acima do ‘ponto de interroga\u00e7\u00e3o' e centralizados acima do “?”.\n<\/p>\n<p>\n  Para fazer a dica de ferramenta centralizada acima do “?” temos que usar o ” <strong>left:50%;<\/strong> ” atributo.\n<\/p>\n<p>\n  Agora, vamos usar o <strong>::before<\/strong> para estilizar o pequeno tri\u00e2ngulo na parte inferior da nossa dica de ferramenta.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-63845098b3ae1.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  O <strong>::after<\/strong> \u00e9 usado para estilizar o conte\u00fado dentro da dica de ferramenta.\n<\/p>\n<p>\n  Vamos ver como isso \u00e9 feito.\n<\/p>\n<p>\n  Primeiro vamos criar o pequeno tri\u00e2ngulo na parte inferior da dica de ferramenta.\n<\/p>\n<pre><code>.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}<\/code><\/pre>\n<p>\n  Devemos usar <strong>o conte\u00fado:””;<\/strong> atributo para mostrar que este elemento n\u00e3o tem um conte\u00fado. Como injetamos algum <strong>conte\u00fado vazio<\/strong>, agora podemos estiliz\u00e1-lo.\n<\/p>\n<p>\n  Podemos <strong>criar tri\u00e2ngulos em CSS<\/strong> usando o atributo <strong>border-width<\/strong>.\n<\/p>\n<p>\n  Por esta linha,\n<\/p>\n<p>\n  <code>border-width: 10px 8px 08px;<\/code>\n<\/p>\n<p>\n  Especificamos que a largura da borda superior \u00e9 de 10 pixels, a direita \u00e9 de 8 pixels, a inferior de 0 pixels e a esquerda de 8 pixels.\n<\/p>\n<p>\n  Isso vai criar um tri\u00e2ngulo para n\u00f3s.\n<\/p>\n<p>\n  Em seguida, vamos criar uma <strong>borda s\u00f3lida<\/strong> para esta se\u00e7\u00e3o e <strong>tornar transparentes as \u00e1reas direita, inferior e esquerda<\/strong>, de modo que apenas a \u00e1rea superior do “tri\u00e2ngulo” seja vista.\n<\/p>\n<pre><code>border-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code><\/pre>\n<p>\n  Depois de tornar a borda s\u00f3lida, estamos aplicando cores para os lados superior, direito, inferior e esquerdo da borda.\n<\/p>\n<p>\n  Devemos usar o mesmo ” <strong>border-color:rgba();<\/strong> ” aqui, que usamos para estilizar o c\u00edrculo ao redor do ponto de interroga\u00e7\u00e3o.\n<\/p>\n<p>\n  <code>border-color: rgba(0,0,0,0.3) transparent transparent transparent;<\/code>\n<\/p>\n<p>\n  Aqui, demos <strong>a cor preta<\/strong> (0,0,0) para a <strong>parte superior<\/strong> da borda e <strong>reduzimos sua opacidade para 0,3<\/strong> para nos dar uma cor verde escura, assim como fizemos para obter o estilo do c\u00edrculo ao redor do “?”.\n<\/p>\n<p>\n  Deixamos as partes <strong>direita, inferior e esquerda<\/strong> da borda ocultas, tornando o <strong>transparente<\/strong>.\n<\/p>\n<p>\n  Mesmo se tiv\u00e9ssemos criado as bordas direita e esquerda, elas s\u00e3o transparentes. A \u00fanica borda colorida \u00e9 a borda superior. O que isso far\u00e1 \u00e9 que a <strong>borda oculta \u00e0 esquerda e \u00e0 direita nos dar\u00e1 um efeito de tri\u00e2ngulo em conjunto com a borda superior colorida<\/strong>.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-6384509cdcb55.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  O resultado final ficar\u00e1 assim.\n<\/p>\n<p>\n  Se voc\u00ea fizer uma pesquisa no Google por “i”, aprender\u00e1 mais sobre isso.\n<\/p>\n<p>\n  Os atributos ” <strong>margin-left<\/strong> ” e ” <strong>top<\/strong> ” s\u00e3o usados \u200b\u200bpara posicionar este tri\u00e2ngulo centralizado acima do c\u00edrculo.\n<\/p>\n<pre><code>top: -20px;\nmargin-left: -8px;<\/code><\/pre>\n<p>\n  Agora <strong>criamos a cauda triangular<\/strong> na parte inferior de nossa dica de ferramenta, que aponta para o “?” sinal.\n<\/p>\n<p>\n  Em seguida, precisamos estilizar a regi\u00e3o do ret\u00e2ngulo arredondado da dica de ferramenta onde as informa\u00e7\u00f5es s\u00e3o exibidas. Para isso, usaremos o atributo <strong>::after<\/strong>.\n<\/p>\n<pre><code>.tooltip::after{\ncontent: \"some text\";\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}<\/code><\/pre>\n<p>\n  Da\u00ed eu usei,\n<\/p>\n<p>\n  <code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  Na se\u00e7\u00e3o de abertura da pseudo classe <strong>.tooltip::after<\/strong>\n<\/p>\n<p>\n  Agora precisamos dar a esta se\u00e7\u00e3o a <strong>mesma cor de fundo<\/strong> que usamos para criar a regi\u00e3o do tri\u00e2ngulo (que \u00e9 preto, com alfa\/opacidade de 0,3).\n<\/p>\n<p>\n  Ent\u00e3o eu adicionei,\n<\/p>\n<p>\n  <code>background: rgba(0,0,0,0.3);<\/code>\n<\/p>\n<p>\n  Em seguida, centralizei esta se\u00e7\u00e3o com nosso “ponto de interroga\u00e7\u00e3o”, como antes. Estou usando uma largura de 300 px para a caixa retangular arredondada e uma margem de -150 px para centraliz\u00e1-la em rela\u00e7\u00e3o ao ponto de interroga\u00e7\u00e3o.\n<\/p>\n<pre><code>top: -20px;\nwidth:300px;\nmargin-left: -150px;<\/code><\/pre>\n<p>\n  Agora vamos dar padding e arredondar as bordas do ret\u00e2ngulo (aplicando border-radius).\n<\/p>\n<pre><code>border-radius: 10px;\ncolor: #fff;\npadding: 14px;<\/code><\/pre>\n<p>\n  Isso tamb\u00e9m definir\u00e1 a cor do texto dentro do ret\u00e2ngulo arredondado como branco (#fff).\n<\/p>\n<p>\n  Agora a regi\u00e3o do ret\u00e2ngulo arredondado que exibe o conte\u00fado est\u00e1 pronta. Mas, ainda assim, n\u00e3o est\u00e1 <strong>posicionado corretamente<\/strong>. A p\u00e1gina HTML atual se parecer\u00e1 com algo mostrado abaixo.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a14de27.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Basicamente, o ret\u00e2ngulo arredondado <strong>se sobrep\u00f5e \u00e0 regi\u00e3o do “tri\u00e2ngulo”<\/strong> que criamos, pois tanto o ::before quanto o ::after usam a mesma margem e s\u00e3o colocados 20 pixels acima do ponto de interroga\u00e7\u00e3o.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450a5b5601.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Precisamos <strong>trazer a caixa retangular arredondada logo acima da se\u00e7\u00e3o triangular<\/strong> que criamos anteriormente, para que ambas apare\u00e7am juntas como uma <strong>caixa de bate-papo<\/strong>.\n<\/p>\n<p>\n  N\u00e3o sabemos qual a altura exata do ret\u00e2ngulo arredondado para coloc\u00e1-lo logo acima do tri\u00e2ngulo, o que queremos \u00e9 transformar <strong>100% da altura do ret\u00e2ngulo arredondado na vertical<\/strong> para que ele fique posicionado logo acima do tri\u00e2ngulo.\n<\/p>\n<p>\n  Como ambos os elementos (tri\u00e2ngulo e ret\u00e2ngulo arredondado) s\u00e3o usados, <code>top: -20px;<\/code>precisamos apenas <strong>transformar o topo do ret\u00e2ngulo arredondado verticalmente em uma altura de pixel<\/strong> igual \u00e0 sua pr\u00f3pria altura.\n<\/p>\n<p>\n  Para isso utilizamos,<code>transform: translateY(-100%);<\/code>\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aa31713.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Agora temos uma estrutura adequada que se parece com uma caixa de informa\u00e7\u00f5es.\n<\/p>\n<h5>\n  Etapa 7: obtendo as informa\u00e7\u00f5es reais dentro da dica de ferramenta<br \/>\n<\/h5>\n<p>\n  Nosso desafio final aqui \u00e9 obter o conte\u00fado certo, que contenha mais informa\u00e7\u00f5es, dentro da dica de ferramenta.\n<\/p>\n<p>\n  Lembre-se que colocamos o conte\u00fado que deve aparecer dentro do tooltip em nosso arquivo HTML.\n<\/p>\n<pre><code><span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><\/pre>\n<p>\n  Usando CSS, podemos pegar um atributo do elemento HTML. Faremos isso usando <strong>attr()<\/strong> no pseudo CSS <strong>.tooltip::after<\/strong>.\n<\/p>\n<p>\n  Ent\u00e3o, em vez de,<code>content: \"some text\";<\/code>\n<\/p>\n<p>\n  n\u00f3s vamos usar<code>content: attr(data-tooltip);<\/code>\n<\/p>\n<p>\n  Aqui, ” <strong>data-tooltip<\/strong> ” \u00e9 o nosso atributo HTML.\n<\/p>\n<p>\n  Usando o atributo que demos para o conte\u00fado em HTML poderemos chamar esse conte\u00fado e mostrar dentro do nosso pseudo CSS. O resultado disso ser\u00e1 o mostrado abaixo,\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-328271-638450aed4573.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Agora. tudo o que precisamos fazer \u00e9 tornar nossa dica de ferramenta invis\u00edvel no in\u00edcio e aparecer apenas quando os usu\u00e1rios passarem o mouse sobre o sinal de ponto de interroga\u00e7\u00e3o (?).\n<\/p>\n<p>\n  Isso \u00e9 muito f\u00e1cil de fazer.\n<\/p>\n<p>\n  Para tornar a dica de ferramenta invis\u00edvel no in\u00edcio, faremos <strong>sua opacidade “0”<\/strong> no seguinte pseudo CSS que escrevemos antes.\n<\/p>\n<pre><code>.tooltip::before .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\n}<\/code><\/pre>\n<p>\n  Para o efeito Hover, adicionaremos um novo pseudo CSS na parte inferior do nosso arquivo style.css. Vamos <strong>tornar a opacidade “1” para o estado de foco<\/strong> para que a dica de ferramenta seja exibida apenas ao passar o mouse.\n<\/p>\n<pre><code>\/* CSS for Hover effects *\/\n \ntooltip:hover::before.tooltip:hover::after{\nOpacity:1;\n}<\/code><\/pre>\n<p>\n  Este pseudo CSS determina apenas o estado hovered, j\u00e1 que usamos “:hover” ap\u00f3s o CSS principal .tooltip\n<\/p>\n<p>\n  Agora nossa dica de ferramenta CSS est\u00e1 pronta.\n<\/p>\n<p>\n  Mas a transi\u00e7\u00e3o da dica de ferramenta n\u00e3o ser\u00e1 t\u00e3o suave quanto voc\u00ea esperaria.\n<\/p>\n<p>\n  Voc\u00ea pode tornar os efeitos de transi\u00e7\u00e3o ainda melhores usando CSS. Para isso, basta adicionar a regra de transi\u00e7\u00e3o abaixo em CSS para as pseudoclasses ::before e ::after.\n<\/p>\n<p>\n  Para saber mais sobre os estilos de transi\u00e7\u00e3o que podem ser feitos usando CSS, leia nosso artigo ” <a href=\"https:\/\/inform.click\/pt-pt\/de-vida-as-suas-paginas-da-web-com-animacoes-e-transicoes-css\/\" title=\"Anima\u00e7\u00f5es e Transi\u00e7\u00f5es CSS\">Anima\u00e7\u00f5es e Transi\u00e7\u00f5es CSS<\/a> “.\n<\/p>\n<pre><code>.tooltip::before.tooltip::after {\ntransition: all ease 0.3s;\n}<\/code><\/pre>\n<p>\n  Esse processo \u00e9 muito mais f\u00e1cil e menos complicado em compara\u00e7\u00e3o com a implementa\u00e7\u00e3o da dica de ferramenta usando JavaScript.\n<\/p>\n<p>\n  Para sua refer\u00eancia, encontre o arquivo HTML e CSS final para praticar isso.\n<\/p>\n<h4>\n  Arquivo HTML final para testar a dica de ferramenta<br \/>\n<\/h4>\n<pre><code>\n\n\n<\/code><\/pre>\n<p><meta charset=\"utf-8\" \/><\/p>\n<pre>\n<\/pre>\n<p><title><br \/>\n  CSS Tooltip<br \/>\n<\/title><\/p>\n<pre>\n<\/pre>\n<link href=\"styles.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\n<pre>\n\n\n<\/pre>\n<form>\n  <code><label>Password:<\/label> <input type=\"password\" \/> <span class=\"tooltip\" data-tooltip=\"Password must contain at least 1 uppercase letter, 1 lowercase letter, a special character and minimum 8 characters\">?<\/span><\/code><br \/>\n<\/form>\n<pre> \n\n<\/pre>\n<h4>\n  <code>Arquivo CSS final Criando uma dica de ferramenta<\/code><br \/>\n<\/h4>\n<pre><code><code>body{\nbackground: #4da73c;\ncolor: #fff;\nfont-family: verdana;\n}\n \nform{\nposition: relative;\nwidth: 100%;\nmax-width: 600px;\nmargin: 20%auto;\n}\n \nformlabel{\nfont-size: 32px;\nletter-spacing: 1px;\n}\n \nforminput{\nmargin: 010px;\npadding: 8px 8px 6px;\nfont-size: 20px;\nborder: 0;\ncolor: #fff;\n}\n \n\/* --------- Tooltip Styles ---------- *\/\n \n.tooltip{\nposition: relative;\nbackground: rgba(0,0,0,0.3);\npadding: 5px 12px;\nborder-radius: 100%;\nfont-size: 20px;\ncursor: help;\n}\n.tooltip::before, .tooltip::after{\nposition: absolute;\nleft: 50%;\nopacity: 0;\ntransition: allease0.3s;\n}\n.tooltip::before{\ncontent: \"\";\nborder-width: 10px 8px 08px;\nborder-style: solid;\nborder-color: rgba(0,0,0,0.3) transparent transparent transparent;\ntop: -20px;\nmargin-left: -8px;\n}\n.tooltip::after{\ncontent: attr(data-tooltip);\nbackground: rgba(0,0,0,0.3);\ntop: -20px;\ntransform: translateY(-100%);\nfont-size: 14px;\nmargin-left: -150px;\nwidth: 300px;\nborder-radius: 10px;\ncolor: #fff;\npadding: 14px;\n}\n \n\/* Hover states *\/\n \n.tooltip:hover::before, .tooltip:hover::after{\nopacity: 1;\n}<\/code><\/code><\/pre>\n<h3>\n  Demonstra\u00e7\u00e3o ao vivo<br \/>\n<\/h3>\n<p>\n  Veja a <a href=\"http:\/\/www.instantshift.com\/demo\/css-tooltip\/\" target=\"_blank\" rel=\"noopener\">dica de ferramenta do Live CSS<\/a> em a\u00e7\u00e3o.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fonte de grava\u00e7\u00e3o: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2018\/05\/11\/create-tooltip-using-css\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea provavelmente j\u00e1 sabe o que \u00e9 uma dica de ferramenta. Uma dica de ferramenta \u00e9 um \u00edcone ou texto que, ao passar o mouse, nos fornece mais informa\u00e7\u00f5es em uma bolha ou pop-up. Voc\u00ea normalmente encontra dicas de ferramentas em formul\u00e1rios, mas pode coloc\u00e1-las sempre que os usu\u00e1rios precisarem de mais informa\u00e7\u00f5es. Na imagem acima, o c\u00edrculo com o ponto de interroga\u00e7\u00e3o mostra uma dica de ferramenta. Ao passar o mouse sobre ela, esta dica de ferramenta fornece mais informa\u00e7\u00f5es sobre os tipos de caracteres que sua senha deve incluir. Voc\u00ea pode obter estruturas para implementar dicas de ferramentas em seu site, mas, na maioria das vezes, essas estruturas usam JavaScript para fazer isso. Nisso \u2026<\/p>\n","protected":false},"author":1,"featured_media":223378,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[72,124,59],"tags":[],"class_list":["post-260659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-9","category-ferramentas-web","category-web-e-wordpress-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=260659"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260659\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/223378"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=260659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=260659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=260659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}