{"id":4027,"date":"2024-09-02T14:04:13","date_gmt":"2024-09-02T14:04:13","guid":{"rendered":"https:\/\/hocoos.com\/?post_type=answer&#038;p=4027"},"modified":"2026-01-20T14:49:45","modified_gmt":"2026-01-20T14:49:45","slug":"o-que-e-dica-de-ferramenta-em-sites","status":"publish","type":"answer","link":"https:\/\/hocoos.com\/pt\/respostas\/o-que-e-dica-de-ferramenta-em-sites\/","title":{"rendered":"O que \u00e9 uma dica de ferramenta em um site?"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>\u00cdndice<\/h2><nav><ul><li><a href=\"#why-should-you-use-tooltips\">Por que voc\u00ea deveria usar dicas de contexto?<\/a><\/li><li><a href=\"#how-do-tooltips-work\">Como funcionam as dicas de contexto?<\/a><\/li><li><a href=\"#where-should-tooltips-be-placed\">Onde as dicas de contexto devem ser posicionadas?<\/a><\/li><li><a href=\"#what-are-the-best-practices-for-designing-tooltips\">Quais s\u00e3o as melhores pr\u00e1ticas para projetar dicas de contexto?<\/a><\/li><li><a href=\"#can-a-tooltip-be-a-button\">Uma dica de contexto pode ser um bot\u00e3o?<\/a><\/li><li><a href=\"#are-there-any-accessibility-considerations-for-tooltips\">H\u00e1 alguma considera\u00e7\u00e3o de acessibilidade para dicas de contexto em sites?<\/a><\/li><li><a href=\"#conclusion\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-should-you-use-tooltips\" style=\"font-size:32px\"><strong>Por que voc\u00ea deveria usar dicas de contexto?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Dicas de contexto podem afetar a experi\u00eancia do usu\u00e1rio em sites e aplicativos ao apresentar breves descri\u00e7\u00f5es de funcionalidades complexas, destacar op\u00e7\u00f5es relevantes, mas frequentemente ocultas, e simplificar as etapas de navega\u00e7\u00e3o para diversos usu\u00e1rios individuais.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nUm mergulho profundo: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nSempre que houver um ponto importante que exija aten\u00e7\u00e3o especial e engajamento do usu\u00e1rio, em vez de explicar tudo nele, a comunica\u00e7\u00e3o pode ser feita por meio de dicas de contexto.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-do-tooltips-work\" style=\"font-size:32px\"><strong>Como funcionam as dicas de contexto?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Geralmente, voc\u00ea ativa uma dica de contexto passando o mouse sobre algum elemento. Em uma tela sens\u00edvel ao toque, voc\u00ea pode tocar em vez disso. Quando voc\u00ea passa o mouse sobre um elemento, uma dica de contexto exibe a caixa com a informa\u00e7\u00e3o e, ao afastar o mouse, a dica de contexto desaparece.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional:  \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nDependendo das a\u00e7\u00f5es intencionais do usu\u00e1rio durante a navega\u00e7\u00e3o, um pequeno atraso na apresenta\u00e7\u00e3o da dica de contexto \u00e9 ben\u00e9fico.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"where-should-tooltips-be-placed\" style=\"font-size:32px\"><strong>Onde as dicas de contexto devem ser posicionadas?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">A posi\u00e7\u00e3o da dica de contexto deve ser facilmente percept\u00edvel sem obstruir nenhum outro componente da p\u00e1gina; normalmente, ela aparece acima, abaixo ou ao lado do elemento sobre o qual o mouse est\u00e1.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nUm mergulho profundo:\n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nN\u00e3o dependa apenas de uma ou mais posi\u00e7\u00f5es predefinidas para as dicas de contexto \u2013 \u00e9 aconselh\u00e1vel testar essas varia\u00e7\u00f5es nas posi\u00e7\u00f5es da dica de contexto.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-are-the-best-practices-for-designing-tooltips\" style=\"font-size:32px\"><strong>Quais s\u00e3o as melhores pr\u00e1ticas para projetar dicas de contexto?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">As pr\u00e1ticas recomendadas para o design de dicas de contexto geralmente abrangem os seguintes t\u00f3picos:&nbsp;<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Mantenha suas respostas concisas:<\/strong> Evite exceder um comprimento razo\u00e1vel.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Empregue linguagem direta:<\/strong> Evite usar jarg\u00f5es ou termos excessivamente t\u00e9cnicos.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Torne-o relevante para o seu usu\u00e1rio:<\/strong> Alinhe a mensagem ao bot\u00e3o sobre o qual o usu\u00e1rio est\u00e1 passando o mouse.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Usabilidade Universal: <\/strong>Garanta que suas dicas de contexto sejam acess\u00edveis a pessoas com defici\u00eancia.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Legibilidade:<\/strong> Projete a dica de contexto com um fundo claro e contraste de texto para garantir uma leitura f\u00e1cil.<\/li>\n<\/ul>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nDica profissional: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\nCertifique-se de usar o mesmo estilo para todas as dicas de ferramentas em seu site ou aplicativo para que pare\u00e7a elegante.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"can-a-tooltip-be-a-button\" style=\"font-size:32px\"><strong>Uma dica de contexto pode ser um bot\u00e3o?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">\u00c0s vezes! No uso padr\u00e3o, as dicas de ferramentas servem apenas para fins informativos, embora tamb\u00e9m possam conter links ou bot\u00f5es. Isso permite que se realizem a\u00e7\u00f5es dentro da dica de ferramenta, mas n\u00e3o exagere nos bot\u00f5es tamb\u00e9m - muitos deles podem ser esmagadores.<\/p>\n\n\n\n<div class=\"answers-tip-box mt-8 mt-lg-10\">\n<div class=\"answers-small-title\">\n\t\t\t\t\t\t\t\nUm mergulho profundo: \n\n<\/div>\n<div class=\"answers-small-description mt-4\">\n\n\u00c9 melhor fornecer dicas de ferramentas interativas apenas quando houver tarefas cruciais a serem conclu\u00eddas ou o espa\u00e7o for limitado.\n\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"are-there-any-accessibility-considerations-for-tooltips\" style=\"font-size:32px\"><strong>Existem considera\u00e7\u00f5es de acessibilidade para dicas de ferramentas?<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Sim! As dicas de ferramentas est\u00e3o dentro dos princ\u00edpios de acessibilidade web e, se voc\u00ea planeja cri\u00e1-las, aqui est\u00e3o alguns pontos importantes a serem considerados:<\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Acessibilidade do teclado:<\/strong> As dicas de ferramentas devem ser ativadas, navegadas e fechadas por meio de entrada de teclado, garantindo a acessibilidade para usu\u00e1rios com funcionalidades limitadas do mouse.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Otimizar para leitores de tela:<\/strong> \u00c9 recomend\u00e1vel que o conte\u00fado da dica de ferramenta possa ser lido por um leitor de tela e seja compreens\u00edvel para usu\u00e1rios com defici\u00eancia visual. Isso geralmente envolve o uso de v\u00e1rios atributos e\/ou r\u00f3tulos ARIA.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Contraste:<\/strong> O texto na dica de ferramenta e o fundo devem ter diferencia\u00e7\u00e3o de cor suficiente para que pessoas com baixa vis\u00e3o possam visualizar confortavelmente esse conte\u00fado.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul style=\"font-size:18px\" class=\"wp-block-list\">\n<li><strong>Gerenciamento de foco:<\/strong> Ao ativar uma determinada dica de contexto, deve ser poss\u00edvel focar nessa dica para que os usu\u00e1rios que utilizam teclado possam navegar por seu conte\u00fado, que pode ter recursos interativos.<\/li>\n<\/ul>\n\n\n\n<p style=\"font-size:18px\">Lembre-se: o design \u00e9 mais eficaz quando considera as necessidades de todos os usu\u00e1rios, incluindo aqueles com defici\u00eancia. \u00c9 igualmente importante notar que o acesso \u00e0s informa\u00e7\u00f5es fornecidas por meio de dicas de contexto deve ser inclusivo para todos, independentemente das habilidades de cada um.<\/p>\n\n\n\n<div style=\"height:72px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusion\" style=\"font-size:32px\"><strong>Conclus\u00e3o<\/strong><\/h2>\n\n\n\n<p style=\"font-size:18px\">Dicas de contexto s\u00e3o informa\u00e7\u00f5es adicionais que ajudam os usu\u00e1rios a entender e definir melhor o prop\u00f3sito. O design, a posi\u00e7\u00e3o e o alcance das dicas de contexto devem ser apropriados. A incorpora\u00e7\u00e3o de dicas de contexto eficazes pode aprimorar a intera\u00e7\u00e3o e a navega\u00e7\u00e3o do usu\u00e1rio em um produto digital.<\/p>","protected":false},"excerpt":{"rendered":"<p>Why should you use tooltips? Tooltips can affect user experience on websites and applications by presenting brief descriptions of complicated functionalities, highlighting relevant but frequently hidden choices, and streamlining navigational steps for diverse individual users. Deep Dive: Whenever there is an important point that requires special attention and engagement from the user, instead of explaining [&hellip;]<\/p>","protected":false},"author":39,"featured_media":4045,"template":"","answers_category":[28],"class_list":["post-4027","answer","type-answer","status-publish","has-post-thumbnail","hentry","answers_category-website-design"],"acf":{"image":7817,"card_image":4045,"content":[{"acf_fc_layout":"header_section","title":"O que \u00e9 uma Dica de Contexto?","descriptions":"A tooltip is a concise message that contains relevant details to the users, usually displayed in a small window only when the cursor is placed over certain elements on the website or application and aims to enhance usability.\r\n\r\nIt works by supplementing the existing information on the screen while avoiding crowding the screen, which can happen if many little messages are left for the users.","tip_label":"Deep Dive","tip":"Picture tooltips as soft voices that quietly provide context and direction without pausing the active task of the user.","additional_tips":null,"key_takeaways_label":"Key Takeaways:","key_takeaways":[{"label":"Tooltips provide users with relevant info in a concise format when they hover over or click on it","body":""},{"label":"Ensure appropriate measures are observed while designing any attached tooltips by making them visible and positioning them in relative proximity","body":""},{"label":"Tooltips give navigation further support by giving additional details and explanations but should not be the only method of navigating","body":""}]}]},"_links":{"self":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer\/4027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answer"}],"about":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/types\/answer"}],"author":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/users\/39"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media\/4045"}],"wp:attachment":[{"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/media?parent=4027"}],"wp:term":[{"taxonomy":"answers_category","embeddable":true,"href":"https:\/\/hocoos.com\/pt\/wp-json\/wp\/v2\/answers_category?post=4027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}