{"id":4347,"date":"2016-11-15T14:03:20","date_gmt":"2016-11-15T16:03:20","guid":{"rendered":"https:\/\/www.mxcursos.com\/blog\/?p=4347"},"modified":"2019-03-16T02:24:44","modified_gmt":"2019-03-16T05:24:44","slug":"aprenda-a-criar-tooltip-usando-css3","status":"publish","type":"post","link":"https:\/\/www.mxcursos.com\/blog\/aprenda-a-criar-tooltip-usando-css3\/","title":{"rendered":"Aprenda a criar tooltip usando CSS3"},"content":{"rendered":"<p>O CSS na forma\u00e7\u00e3o da tr\u00edade (HTML, CSS, Javascript), tem como objetivo a estiliza\u00e7\u00e3o de p\u00e1ginas. Defini\u00e7\u00f5es de cores, dimens\u00f5es, posicionamento. Para qualquer tipo de anima\u00e7\u00e3o, precis\u00e1vamos recorrer ao Javascript.<\/p>\n<p>A partir do CSS3 passou a ser poss\u00edvel\u00a0realizar anima\u00e7\u00f5es e manipula\u00e7\u00f5es apenas utilizando o CSS.\u00a0Antes tamb\u00e9m era poss\u00edvel, por exemplo, usando apenas a pseudo-classe <em>:hover<\/em>, mas isso\u00a0se apresentava de forma mais &#8220;seca&#8221;, n\u00e3o criando um efeito suavizado que queremos muitas vezes apresentar.<\/p>\n<p>No tutorial a seguir, as propriedades respons\u00e1veis pelo feito ser\u00e3o\u00a0<em>Transition e\u00a0Transform.<\/em><\/p>\n<h3>Introdu\u00e7\u00e3o \u00e0s Propriedades<\/h3>\n<p>Antes de come\u00e7ar o tutorial em si, \u00e9 interessante falar um pouco\u00a0sobre as\u00a0propriedade que ser\u00e3o utilizada no decorrer do texto.<\/p>\n<p>Como informado acima, determinados efeitos s\u00e3o\u00a0mostrados de forma mais &#8220;seca&#8221; e para conseguir essa &#8220;suaviza\u00e7\u00e3o&#8221;, temos a propriedade <em>Transition<\/em>.<\/p>\n<p>Essa propriedade ir\u00e1 calcular o tempo de mudan\u00e7a de uma a\u00e7\u00e3o \u00e0 outra utilizando o :hover.<\/p>\n<p>Com \u00a0a\u00a0<em>Transition\u00a0<\/em>voc\u00ea consegue configurar o que ser\u00e1 animado (<em>transition-property<\/em>), a dura\u00e7\u00e3o do efeito (<em><span class=\"pln\">transition<\/span><span class=\"pun\">&#8211;<\/span><span class=\"pln\">duration<\/span><\/em>), a progress\u00e3o da transi\u00e7\u00e3o (<em><span class=\"pln\">transition<\/span><span class=\"pun\">&#8211;<\/span><span class=\"pln\">timing<\/span><span class=\"pun\">&#8211;<\/span><span class=\"kwd\">function<\/span><\/em>) e o\u00a0tempo da transi\u00e7\u00e3o (<em><span class=\"pln\">transition<\/span><span class=\"pun\">&#8211;<\/span><span class=\"pln\">delay<\/span><\/em>).<\/p>\n<p>Voc\u00ea consegue utilizar essas propriedades de forma \u00fanica, da mesma forma que <em>background<\/em>\u00a0usando apenas\u00a0<em>transition.<\/em><\/p>\n<p>Outra propriedade, s\u00f3 que\u00a0voltada para modifica\u00e7\u00e3o do elemento, \u00e9 a\u00a0<em>Transform<\/em>.<\/p>\n<p>Com esta propriedade voc\u00ea modificar\u00e1 a forma de um elemento, como dimens\u00e3o (<em>scale<\/em>), mover para o eixo x e y (<em>translation<\/em>), modificar \u00e2ngulos (<em>skew<\/em>)\u00a0e rotacionar\u00a0o elemento (<em>rotate<\/em>).<\/p>\n<h3>\u00a0Navegadores<\/h3>\n<p>No decorrer do tutorial, ser\u00e3o utilizados os prefixos. Ele s\u00e3o usados por que\u00a0alguns navegadores\u00a0realizam suas implementa\u00e7\u00f5es das propriedades que as vezes ainda s\u00e3o rascunhos na <em>W3C<\/em>.<\/p>\n<p>Voc\u00ea tem prefixo pra Chrome e Opera\u00a0(<em>-webkit-<\/em>), para o Internet Explorer (<em>-ms-<\/em>)\u00a0e para Mozilla Firefox \u00a0<em>(-mo-<\/em>). Sempre ao utilizar os prefixos, deixe a propriedade sem o prefixo por \u00faltimo para garantir o funcionamento nos navegadores que j\u00e1 tenham esta propriedade por padr\u00e3o.<\/p>\n<h3>Vamos ao tutorial<\/h3>\n<p>O <em>tooltip<\/em> ou \u201cdica de contexto\u201d \u00e9 muito utilizado\u00a0quando voc\u00ea deseja mostrar informa\u00e7\u00f5es adicionais ou explicativa a um elemento na p\u00e1gina. Basicamente o seu funcionamento consiste ao\u00a0passar o mouse nesse elemento, aparecendo assim uma determinada mensagem.<\/p>\n<p>Nossa estrutura de arquivos e pastas ficar\u00e1 da seguinte forma:<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/folder-tooltip.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-4441\" src=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/folder-tooltip.png\" alt=\"folder-tooltip\" width=\"215\" height=\"154\" srcset=\"https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/folder-tooltip.png 215w, https:\/\/www.mxcursos.com\/blog\/wp-content\/uploads\/2016\/08\/folder-tooltip-24x17.png 24w\" sizes=\"(max-width: 215px) 100vw, 215px\" \/><\/a><\/p>\n<p>Agora iremos definir as marca\u00e7\u00f5es no <strong>index.html.<\/strong><\/p>\n<pre class=\"lang:default decode:true\">&lt;!doctype html&gt;\r\n&lt;html lang=\"pt-br\"&gt;\r\n    &lt;head&gt;\r\n        &lt;title&gt;Tooltip com CSS 3&lt;\/title&gt;\r\n        &lt;meta charset=\"UTF-8\"&gt;\r\n         &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/necolas.github.io\/normalize.css\/4.1.1\/normalize.css\" \/&gt;\r\n        &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\" \/&gt;\r\n     &lt;\/head&gt;\r\n    &lt;body&gt;\r\n        &lt;header&gt;&lt;\/header&gt; \r\n        &lt;ul id=\"shared\"&gt;\r\n            &lt;li class=\"facebook\"&gt;&lt;a href=\"#\"&gt;&lt;span&gt;Facebook&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n            &lt;li class=\"twitter\"&gt;&lt;a href=\"#\"&gt;&lt;span&gt;Twitter&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n            &lt;li class=\"email\"&gt;&lt;a href=\"#\"&gt;&lt;span&gt;Email&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n        &lt;\/ul&gt; \r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Explicando o c\u00f3digo acima.<\/p>\n<ul class=\"list-tutorial\">\n<li>Na linha 6, chama o <a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noopener noreferrer\"><em>normalize.css<\/em><\/a>\u00a0para padronizar as tags;<\/li>\n<li>Na linha 7, chama\u00a0o arquivo <em>style.css<\/em>\u00a0que ir\u00e1 conter a estiliza\u00e7\u00e3o;<\/li>\n<li>Na linha 10, define a tag\u00a0<em>header<\/em>\u00a0apenas pra ter uma espa\u00e7amento que ser\u00e1 definido no CSS;<\/li>\n<li>Na linha 11 a 15, define uma lista n\u00e3o ordenada com os itens. Veja que dentro do link de cada item da lista tem um span que ser\u00e1 exibido\u00a0ao passar o mouse;<\/li>\n<\/ul>\n<p>Agora iremos ao<strong> style.css.<\/strong><\/p>\n<pre class=\"lang:css decode:true \">body{\r\n    background:#e5e5e5;\r\n}\r\nheader{\r\n    height: 100px;\r\n\tbackground:#ccc;\r\n}\r\n#shared {\r\n    list-style:none;\r\n\ttext-align:center;\r\n}\r\n#shared li{\r\n   display: inline-block;   \t\r\n} \r\n#shared li a{\r\n\tdisplay: inline-block;        \r\n\twidth:65px;\r\n    height: 60px;\r\n    position: relative;\r\n    background:url(..\/images\/sprite.png) no-repeat;  \r\n}\r\n#shared li.facebook a{\r\n    background-position: 0 0;\r\n} \r\n#shared li.twitter a{\r\n    background-position: 0 -61px;\r\n} \r\n#shared li.email a{\r\n    background-position: 0 -121px;\r\n} \r\n#shared li a span{\r\n    position: absolute; \r\n    width:100px;\r\n    height:100px;\r\n    bottom:-60px;\r\n    left:50%;\r\n    margin-left: -50px;\r\n    border-radius: 50%;\r\n    opacity: 0;\r\n    background: rgba(255,255,255,0.5);\r\n    color:#333;\r\n    font-size:12px;\r\n    font-weight: bold;\r\n    text-align: center;\r\n    line-height: 100px;\r\n    border:1px solid #ccc; \r\n    -webkit-transition: all 0.3s ease-in-out;\r\n    -moz-transition: all 0.3s ease-in-out;\r\n    -o-transition: all 0.3s ease-in-out;\r\n    -ms-transition: all 0.3s ease-in-out;\r\n    transition: all 0.3s ease-in-out;\r\n    -webkit-transform: scale(0.1);\r\n    -moz-transform: scale(0.1);\r\n    -o-transform: scale(0.1);\r\n    -ms-transform: scale(0.1);\r\n    transform: scale(0.1);\r\n}\r\n#shared li a:hover span{\r\n    bottom:60px;\r\n    opacity: 1;\r\n    -webkit-transform: scale(1);\r\n    -moz-transform: scale(1);\r\n    -o-transform: scale(1);\r\n    -ms-transform: scale(1);\r\n    transform: scale(1);\r\n}<\/pre>\n<p>Explicando o c\u00f3digo acima.<\/p>\n<ul class=\"list-tutorial\">\n<li>Na linha 1 a 3, seleciona a tag <em>body<\/em> para definir uma cor de fundo;<\/li>\n<li>Na linha 4 a 7, seleciona a tag <em>header <\/em>que\u00a0define uma altura e uma cor de fundo;<\/li>\n<li>Na linha 8 a 11, seleciona a lista n\u00e3o ordenada <em>#shared,\u00a0<\/em>retira o bullet e define que o texto dentro desse bloco ser\u00e1 centralizado;<\/li>\n<li>Na linha 12 a 14, define a forma que ser\u00e1 renderizada o elemento da lista, o\u00a0<em>inline-block\u00a0<\/em>que\u00a0ser\u00e1 definido para que os itens fiquem lado a lado;<\/li>\n<li>Na linha 15 a 21, define as configura\u00e7\u00f5es do link como\u00a0<em>display:inline-block<\/em>, uma largura e altura, posi\u00e7\u00e3o relativa\u00a0e a imagem com os \u00edcones;<\/li>\n<li>Na linha 22 a 30, define a posi\u00e7\u00e3o da imagem que adicionamos nos\u00a0links. Essa\u00a0t\u00e9cnica tem nome de <em>CSS Sprite, <\/em>onde agrupamos v\u00e1rias imagens e uma \u00fanica imagem para serem exibidas apenas mudando o <em>background-position<\/em>;<\/li>\n<li>Na linha 31 a 57, define a forma que ser\u00e1 exibido o tooltip:\n<ul>\n<li><del><\/del>Define uma posi\u00e7\u00e3o absoluta em rela\u00e7\u00e3o ao elemento pai;<\/li>\n<li>Define uma largura(<em>width<\/em>) e altura(<em>height<\/em>);<\/li>\n<li>Define um <em>bottom:-60px\u00a0<\/em>para fazer o efeito do tooltip est\u00e1 subindo;<\/li>\n<li>Define <em>left:50%<\/em> e margin-left:-50px para centralizar na horizontal;<\/li>\n<li>Define <em>border-radius:50%\u00a0<\/em>pra transformar o elemento em um circulo;<\/li>\n<li>Define <em>opacity:0\u00a0<\/em>\u00a0para ocultar o elemento;<\/li>\n<li>Define background, usando <em>rgba<\/em>, pois assim podemos definir o alfa, deixando a cor\u00a0transparente;<\/li>\n<li>Define a cor do texto;<\/li>\n<li>Define tamanho da fonte (font-size) e coloca ela em negrito (<em>font-weigth<\/em>);<\/li>\n<li>Centraliza o texto;<\/li>\n<li>Define o <em>line-height\u00a0<\/em>da mesmo tamanho da altura para centralizar\u00a0o texto na vertical;<\/li>\n<li>Define um borda;<\/li>\n<li>Define o efeito transition :\n<ul>\n<li><em>all<\/em> =&gt; total as propriedades;<\/li>\n<li>\u00a0<em>0.3<\/em> =&gt; tempo da transi\u00e7\u00e3o;<\/li>\n<li><em>ease-in-out<\/em> =&gt; a forma da transi\u00e7\u00e3o<\/li>\n<\/ul>\n<\/li>\n<li>Define o <em>transform<\/em>\u00a0usando <em>scale<\/em> pra diminuir a dimens\u00e3o do span. voltaremos ao tamanho natural ap\u00f3s passar o mouse.<\/li>\n<\/ul>\n<\/li>\n<li>Na linha 58 a 66,\u00a0configura a exibi\u00e7\u00e3o do tooltip ao passar o mouse no elemento da lista n\u00e3o ordenada:\n<ul>\n<li>Define <em>bottom:60px<\/em>\u00a0para ficar acima do \u00edcone;<\/li>\n<li>Define <em>opacity:1<\/em> para mostrar o tooltip;<\/li>\n<li>Define o <em>transform\u00a0<\/em>com <em>scale(1)\u00a0<\/em>para voltar o tamanho normal;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Veja o efeito como fica:<\/p>\n<p><a href=\"https:\/\/www.mxcursos.com\/blog\/exemplos\/tooltip\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.mxcursos.com\/blog\/exemplos\/tooltip\/<\/a><\/p>\n<p>Para baixar os arquivos:<\/p>\n<p><a href=\"https:\/\/github.com\/davidchc\/tutorial-tooltip-css3\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/davidchc\/tutorial-tooltip-css3<\/a><\/p>\n<p>Durante o tutorial tamb\u00e9m utilizamos outras propriedades do CSS3, como <em>border-radius<\/em>\u00a0e tamb\u00e9m usamos o <em>rgba<\/em>, para colocar um valor de opacidade (alfa), mas preferimos d\u00e1 um foco no\u00a0<em>Transition e\u00a0Transform\u00a0<\/em>devido \u00e0 realiza\u00e7\u00e3o do efeito esperado.<\/p>\n<p>Espero que tenham gostado.<\/p>\n<p>Abra\u00e7os e at\u00e9 a pr\u00f3xima.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O CSS na forma\u00e7\u00e3o da tr\u00edade (HTML, CSS, Javascript), tem como objetivo a estiliza\u00e7\u00e3o de p\u00e1ginas. Defini\u00e7\u00f5es de cores, dimens\u00f5es, posicionamento. Para qualquer tipo de anima\u00e7\u00e3o, precis\u00e1vamos recorrer ao Javascript. A partir do CSS3 passou a ser poss\u00edvel\u00a0realizar anima\u00e7\u00f5es e manipula\u00e7\u00f5es apenas utilizando o CSS.\u00a0Antes tamb\u00e9m era poss\u00edvel, por exemplo, usando apenas a pseudo-classe :hover, [&hellip;]<\/p>\n","protected":false},"author":67,"featured_media":5185,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[678],"tags":[],"class_list":["post-4347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento"],"_links":{"self":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/4347","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\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/comments?post=4347"}],"version-history":[{"count":0,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/posts\/4347\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media\/5185"}],"wp:attachment":[{"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/media?parent=4347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/categories?post=4347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mxcursos.com\/blog\/wp-json\/wp\/v2\/tags?post=4347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}