1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3511],{49090:function(e,o,i){"use strict";i(2784);var n=i(97729),s=i.n(n),a=i(52322);o.Z=function(e){var o=e.title;return(0,a.jsx)(s(),{children:(0,a.jsxs)("title",{children:[o," | Doc"]})})}},20082:function(e,o,i){"use strict";i.r(o),i.d(o,{default:function(){return l}});var n=i(52322),s=i(45392),a=i(35505),t=i(55975),r=a.ZP.section.withConfig({displayName:"ContainerDoAndDonts",componentId:"sc-abvolo-0"})(["display:grid;grid-gap:",";max-width:800px;@media (min-width:768px){grid-template-columns:1fr 1fr;}"],t.Z.spaces[400]),d=i(49090);function c(e){var o=Object.assign({h1:"h1",p:"p",img:"img",h2:"h2",h3:"h3",a:"a"},(0,s.ah)(),e.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(d.Z,{title:"Guia de Uso | Tooltip"}),"\n",(0,n.jsx)(o.h1,{children:"Tooltip"}),"\n",(0,n.jsx)(o.p,{children:"As Tooltips fornecem informa\xe7\xf5es adicionais ao passar o mouse sobre alguns\nelementos. As informa\xe7\xf5es devem ser contextuais, \xfateis e breves."}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"/images/tooltip-heading.png",alt:"Tooltip"})}),"\n",(0,n.jsx)(o.h2,{children:"Anatomia"}),"\n",(0,n.jsx)(o.p,{children:(0,n.jsx)(o.img,{src:"/images/tooltip-anatomia.png",alt:"Tooltip"})}),"\n",(0,n.jsx)(o.h2,{children:"Op\xe7\xf5es"}),"\n",(0,n.jsx)(o.p,{children:"A Tooltip \xe9 posicionada em rela\xe7\xe3o ao elemento acionador nas seguintes\nposi\xe7\xf5es: superior esquerdo, superior, superior direito, central esquerda,\ncentral direita, inferior esquerda, inferior e inferior direita.\nEssas varia\xe7\xf5es v\xe3o depender do caso de uso."}),"\n",(0,n.jsxs)(o.p,{children:[(0,n.jsx)(o.img,{src:"/images/tooltip-top.png",alt:"Tooltip"}),"\n",(0,n.jsx)(o.img,{src:"/images/tooltip-side.png",alt:"Tooltip"}),"\n",(0,n.jsx)(o.img,{src:"/images/tooltip-bottom.png",alt:"Tooltip"}),"\n",(0,n.jsx)(o.img,{src:"/images/tooltip-space.png",alt:"Tooltip"})]}),"\n",(0,n.jsx)(o.h2,{children:"Diretrizes de uso"}),"\n",(0,n.jsx)(o.h3,{children:"Seja sucinto"}),"\n",(0,n.jsx)(o.p,{children:"As Tooltip devem ser concisas e claras. Mantenha frases curtas com no m\xe1ximo\nduas linhas. Se as informa\xe7\xf5es que voc\xea precisa comunicar forem mais longas,\nprocure usar outro componente."}),"\n",(0,n.jsxs)(r,{children:[(0,n.jsx)("img",{src:"/images/tooltip-sucinto-do.png",alt:"Seja sucinto do"}),(0,n.jsx)("img",{src:"/images/tooltip-sucinto-dont.png",alt:"Seja sucinto dont"})]}),"\n",(0,n.jsx)(o.h3,{children:"Visibilidade"}),"\n",(0,n.jsx)(o.p,{children:"Mantenha o componente Tooltip em uma posi\xe7\xe3o vis\xedvel, n\xe3o corte as dicas e\nnem deixe outro componente acima."}),"\n",(0,n.jsxs)(r,{children:[(0,n.jsx)("img",{src:"/images/tooltip-visibilidade-do.png",alt:"Visibilidade do"}),(0,n.jsx)("img",{src:"/images/tooltip-visibilidade-dont.png",alt:"Visibilidade dont"})]}),"\n",(0,n.jsx)(o.h3,{children:"Diferen\xe7a de elementos"}),"\n",(0,n.jsx)(o.p,{children:"As Tooltips distinguem as a\xe7\xf5es com a iconografia selecionada quando o usu\xe1rio\nfaz o movimento de hover sobre a inteface. N\xe3o utilize as tooltips para dar\ninforma\xe7\xf5es em outros lugares e tamb\xe9m n\xe3o adicione imagens dentro da tooltip."}),"\n",(0,n.jsxs)(r,{children:[(0,n.jsx)("img",{src:"/images/tooltip-diferenca-do.png",alt:"Diferen\xe7a de elementos do"}),(0,n.jsx)("img",{src:"/images/tooltip-diferenca-dont.png",alt:"Diferen\xe7a de elementos dont"})]}),"\n",(0,n.jsx)(o.h2,{children:"Acessibilidade"}),"\n",(0,n.jsxs)(o.p,{children:["Este componente foi validado para atender \xe0s diretrizes da WCAG. Voc\xea pode\nencontrar todas as informa\xe7\xf5es sobre a ",(0,n.jsx)(o.a,{href:"https://www.w3.org/TR/WCAG21/",children:"acessibilidade WCAG 2.1"}),"\ne em ",(0,n.jsx)(o.a,{href:"http://acessibilida.de",children:"acessibilida.de"})]}),"\n",(0,n.jsx)(o.h3,{children:"\u2705 1.4.3 - Contraste AA (Percept\xedvel)"}),"\n",(0,n.jsx)(o.p,{children:"Textos devem ter uma rela\xe7\xe3o de contraste entre primeiro e segundo plano\nde ao menos 4.5:1."}),"\n",(0,n.jsx)(o.h3,{children:"\u2705 1.4.13 - Conte\xfado em foco por mouse ou teclado AA (Percept\xedvel)"}),"\n",(0,n.jsx)(o.p,{children:"Conte\xfados adicionais (exemplo: tooltip ou sub-menu) n\xe3o devem ser acionados apenas\ncom foco por mouse (mouseover) ou teclado. Caso isso ocorra, certas condi\xe7\xf5es\ndevem ser atendidas."}),"\n",(0,n.jsx)(o.h3,{children:"\u2705 2.4.3 - Ordem do foco A (Oper\xe1vel)"}),"\n",(0,n.jsx)(o.p,{children:"A navega\xe7\xe3o (atrav\xe9s de um teclado) por elementos foc\xe1veis em tela deve ser\nsequencial e l\xf3gica de acordo com o conte\xfado apresentado."}),"\n",(0,n.jsx)(o.h3,{children:"\u2705 3.3.5 - Ajuda (Compreens\xedvel)"}),"\n",(0,n.jsx)(o.p,{children:"Caso um r\xf3tulo (label) n\xe3o seja suficiente para explicar o preenchimento de um\
1ndeterminado campo, uma ajuda contextualizada deve ser fornecida."})]})}var l=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=Object.assign({},(0,s.ah)(),e.components),i=o.wrapper;return i?(0,n.jsx)(i,Object.assign({},e,{children:(0,n.jsx)(c,e)})):c(e)}},24166:function(e,o,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/doc/guidelines/tooltip",function(){return i(20082)}])}},function(e){e.O(0,[9774,2888,179],(function(){return o=24166,e(e.s=o);var o}));var o=e.O();_N_E=o}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.