CSS Tooltips simples

Recentemente precisei de um tooltip levezinho e simples para um site que estava a construir, foi com agrado que descobri neste websiteSixRevisions, Sexy Tooltips with Just CSS. vários exemplos de tooltips com e sem imagens, simples e mais elaborados. O código abaixo tem como base o Sexy Css tootip simples, com algumas modificações.

Exemplo Css TooltipEste é um exemplo de um tooltip simples.

Código css necessário:

/* CSS 
   Baseado em "Sexy Tooltips with Just CSS" de http://sixrevisions.com
   Adaptado por https://www.jjoao.com
*/

.tooltipX {
     color:#066; outline: none;
     text-decoration: underline;
     position: relative;
}

.tooltipX span {
     margin-left: -999em;
     position: absolute;
}
.tooltipX:hover span { 
     border-radius: 5px 5px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
     -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
     -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
     position: absolute; 
     left: 30px; 
     top: 25px; 
     z-index: 99;
     margin-left: 0; 
     width: 250px;
}

.classic { 
     padding: 0.8em 1em; 
     background: #ececec; 
     border: 1px solid #ccc; 
    }
* html a:hover { background: transparent;  /* to help IE6 */ }

CSS – Download do código fonteDownload do código fonte css.

Exemplo tooltip com link: WebsiteSixRevisions, Sexy Tooltips with Just CSS.

Código fonte do link:

WebsiteSixRevisions, Sexy Tooltips with Just CSS.

Use e abuse deste código, mas dê o crédito de quem o fez inicialmente, e já agora visite o site do autor SixRevisionsSixRevisions, Sexy Tooltips with Just CSS.