{"id":552,"date":"2012-11-14T12:47:25","date_gmt":"2012-11-14T16:47:25","guid":{"rendered":"http:\/\/mxcursos.com\/blog\/?p=552"},"modified":"2019-03-18T10:19:20","modified_gmt":"2019-03-18T13:19:20","slug":"criadores-automaticos-de-tooltip","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/criadores-automaticos-de-tooltip\/","title":{"rendered":"Criadores autom\u00e1ticos de Tooltip"},"content":{"rendered":"<p>Se voc\u00ea est\u00e1 procurando por <strong>criadores autom\u00e1ticos de tooltip<\/strong>, voc\u00ea est\u00e1 no lugar certo.<\/p>\n<p>Voc\u00ea certamente j\u00e1 deve ter visto aqueles bal\u00f5es que aparecem quando clicamos em determinado link ou imagem, certo? Inicialmente, parece um bal\u00e3o de conversa onde na maioria das vezes \u00e9 criado como ret\u00e2ngulo, cantos arredondados e uma setinha.<\/p>\n<p>Isso se chama <strong>Tooltip<\/strong> e pode ser feito rapidamente usando CSS e um editor de imagens como Photoshop ou Fireworks. Mas o que muitos n\u00e3o sabem \u00e9 que existem alguns sites que facilitam esse processo e oferecem o c\u00f3digo para que voc\u00ea possa incrementar mais ainda seus projetos.<\/p>\n<p>O primeiro \u00e9 o <strong>CSS Tooltip<\/strong>, que apesar de simples lhe permite customizar o tooltip da forma que desejar. Ao final, ap\u00f3s criar o bal\u00e3o que mais combina com o estilo do seu projeto, voc\u00ea poder\u00e1 copiar o c\u00f3digo CSS e inserir no seu site.<\/p>\n<p>Voc\u00ea ainda tem 2 modelos de tooltip, sendo um vertical e outro horizontal.<\/p>\n<p><strong><a href=\"https:\/\/csstooltip.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Clique aqui para acessar o site<\/a><\/strong><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-557 size-full\" title=\"Criadores autom\u00e1ticos de Tooltip\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2012\/11\/csstooltip-1.jpg\" alt=\"Criadores autom\u00e1ticos de Tooltip\" width=\"600\" height=\"401\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2012\/11\/csstooltip-1.jpg 600w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2012\/11\/csstooltip-1-24x16.jpg 24w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>J\u00e1 o <strong>CSS Arrow Please<\/strong>, na minha vis\u00e3o \u00e9 mais completo por oferecer uma gama maior de estiliza\u00e7\u00e3o e por ter um design mais refinado. Apesar de menos minimalista, ele permite que voc\u00ea crie os bal\u00f5es de v\u00e1rias formas, dire\u00e7\u00f5es e cores, deixando o estilo que mais desejar.<\/p>\n<p><strong><a href=\"https:\/\/cssarrowplease.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Clique aqui para acessar o site<\/a><\/strong><\/p>\n<p>Agora, se voc\u00ea quer algo mais implementado e mais complexo (e completo), conhe\u00e7a o <a href=\"https:\/\/jquerytools.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jquery Tools<\/a>.<\/p>\n<p>Tudo bem, mas sempre tem aquele que aparece e diz: &#8220;Quem sabe faz!&#8221; Ok, interessante, mas acredito ser uma grande hipocrisia. Tempo \u00e9 dinheiro e tempo t\u00e1 curto. O lance \u00e9 improvisar e otimizar.<\/p>\n<p>Sa sabe fazer \u00f3timo, se n\u00e3o sabe, \u00f3timo! Web \u00e9 isso!<\/p>\n<p>Abra\u00e7o a todos!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Se voc\u00ea est\u00e1 procurando por criadores autom\u00e1ticos de tooltip, voc\u00ea est\u00e1 no lugar certo. Voc\u00ea certamente j\u00e1 deve ter visto aqueles bal\u00f5es que aparecem quando clicamos em determinado link ou imagem, certo? Inicialmente, parece um bal\u00e3o de conversa onde na maioria das vezes \u00e9 criado como ret\u00e2ngulo, cantos arredondados e uma setinha. Isso se chama [&hellip;]<\/p>\n","protected":false},"author":83,"featured_media":18248,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[1177,1176],"class_list":["post-552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-css","tag-tooltip"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/users\/83"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=552"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/552\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/18248"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}