Framework ToolTips apenas com CSS3 e HTML5

Muitas pessoas busca o recurso de ToolTips com JavaScript, porem com os novos recursos do HTML5 e do CSS3 tornou possível possível criar um ToolTips apenas com CSS e sem javascript. O CSS3 Tips é pequeno, e você pode até personalizar os seletores do CSS e o atributo data-* do HTML5.

A vantagem de usar CSS3 Tips é por ser leve e não precisar recorrer plugins jQuery na manipulação do DOM do navegador, o que torna a página mais pesada para o client-side. Vale ressaltar que o CSS3 Tips funciona em todos os navegadores com HTML5 e CSS3:

• Chrome
• Firefox
• Safari
• IE9+

/**
 * CSS3 Tips
 *
 * A stylesheet for creating tooltips without using anything other than CSS3.
 *
 * created by c.bavota
 * released under GPL v2
 *
 * November 6th, 2013
 */
[data-tips] {
 position: relative;
 text-decoration: none;
}

 [data-tips]:after,
 [data-tips]:before {
 position: absolute;
 z-index: 100;
 opacity: 0;
 }

 [data-tips]:after {
 content: attr(data-tips);
 height: 25px;
 line-height: 25px;
 padding: 0 10px;
 font-size: 12px;
 text-align: center;
 color: #fff;
 background: #222;
 border-radius: 5px;
 text-shadow: 0 0 5px #000;
 -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
 -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
 box-shadow: 0 0 5px rgba(0,0,0,0.3);
 white-space: nowrap;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 }

 [data-tips]:before {
 content: "";
 width: 0;
 height: 0;
 border-width: 6px;
 border-style: solid;
 }

 [data-tips]:hover:after,
 [data-tips]:hover:before {
 opacity: 1;
 }

/* Top tips */
[data-tips].top-tip:after,
[data-tips].top-tip:before {
 -webkit-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
 -moz-transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
 transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out;
 bottom: 90%;
 left: -9999px;
 margin-bottom: 12px;
}

 [data-tips].top-tip:before {
 border-color: #222 transparent transparent transparent;
 margin-bottom: 0;
 }

 [data-tips].top-tip:hover:after,
 [data-tips].top-tip:hover:before {
 bottom: 100%;
 left: 0;
 }

 [data-tips].top-tip:hover:before {
 left: 15px;
 }

/* Bottom tip */
[data-tips].bottom-tip:after,
[data-tips].bottom-tip:before {
 -webkit-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
 -moz-transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
 transition: top 0.25s ease-in-out, opacity 0.25s ease-in-out;
 top: 90%;
 left: -9999px;
 margin-top: 12px;
}

 [data-tips].bottom-tip:before {
 border-color: transparent transparent #222 transparent;
 margin-top: 0;
 }

 [data-tips].bottom-tip:hover:after,
 [data-tips].bottom-tip:hover:before {
 top: 100%;
 left: 0;
 }

 [data-tips].bottom-tip:hover:before {
 left: 15px;
 }

/* Right tip */
[data-tips].right-tip:after,
[data-tips].right-tip:before {
 -webkit-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
 -moz-transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
 transition: left 0.25s ease-in-out, opacity 0.25s ease-in-out;
 top: -9999px;
 left: 96%;
 margin-left: 12px;
}

 [data-tips].right-tip:before {
 border-color: transparent #222 transparent transparent;
 margin-left: 0;
 }

 [data-tips].right-tip:hover:after,
 [data-tips].right-tip:hover:before {
 left: 100%;
 top: 0;
 }

 [data-tips].right-tip:hover:before {
 top: 7px;
 }

/* Left tip */
[data-tips].left-tip:after,
[data-tips].left-tip:before {
 -webkit-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
 -moz-transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
 transition: right 0.25s ease-in-out, opacity 0.25s ease-in-out;
 top: -9999px;
 right: 96%;
 margin-right: 12px;
}

 [data-tips].left-tip:before {
 border-color: transparent transparent transparent #222;
 margin-right: 0;
 }

 [data-tips].left-tip:hover:after,
 [data-tips].left-tip:hover:before {
 right: 100%;
 top: 0;
 }

 [data-tips].left-tip:hover:before {
 top: 7px;
 

Já com o HTML você usa o class para definir a posição, e o atributo do HTML5 data-tips, veja o exemplo:

<a href="http://agentewebmaster.ucoz.com.br/" class="top-tip" data-tips="Ir para o site Agente Webmaster">agentewebmaster.ucoz.com.br</a>

Exemplo

agentewebmaster.ucoz.com.br

As posições

A caixa que aparece o texto do tooltips pode ter diferentes posições, e para defini-las basta usar as seguintes classes:

• top-tip
• bottom-tip
• left-tip
• right-tip

Um tooltip em cima   Um tooltip em baixo   Um tooltip à esquerda   Um tooltip à direita

Você pode ver a página oficial no projeto nesse link http://cbavota.bitbucket.org/css3-tips/