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:#fff; outline: none;
text-decoration: underline;
position: relative;
}
.tooltipX span {
color:#000;
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 {
color:#000;
padding: 0.8em 1em;
background: #ccc;
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.