Simples e bom Tooltip Text em css

Se você precisar colocar informações, a respeito de algum detalhe da página, em um curto espaço, uma boa alternativa é usar o Tooltip text.

No exemplo abaixo , ao passar o mouse por cima do “?” ele irá mostrar o texto que está dentro do span. A cor, fonte, etc… Podem ser customizados dentro da tag style.

Para qualquer link que colocar class=”dcontexto”, ele irá mostrar o span, contido na tag “A” do link , como tooltip text.

<html>
<head>
<style>
a.dcontexto{
        position:relative;
        font:12px arial, verdana, helvetica, sans-serif;
        padding:0;
        color:#333333;
        text-decoration:none;
        cursor:help;
        z-index:50;
        font-weight:bold;
}
a.dcontexto:hover{
        background:transparent;
        z-index:55;
}
a.dcontexto span{
        display:none;
}
a.dcontexto:hover span{
        display:block;
        position:absolute;
        width:250px;
        text-align:justify;
        top:0em;
        left:3em;
        font: 12px arial, verdana, helvetica, sans-serif;
        padding:5px 10px;
        border:1px solid #D1B819;
        background:#FFF575;
        color:#1921FF; 
        text-decoration:none;
        filter: alpha(opacity:80);
        KHTMLOpacity: 0.90;
        MozOpacity: 0.90;
        opacity: 0.90;
}
</style>
</head>
<body>

  <label for="label1">Estilo (css)</label>
  <input id="label1" type="text"/> <a href="#" class="dcontexto">?<span>Estilo do CSS da tela da AR. Normalmente é "padrao.css".</span></a>

</body>

2 comentários em “Simples e bom Tooltip Text em css

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Blue Captcha Image
Atualizar

*

Facebook

Get the Facebook Likebox Slider Pro for WordPress
WordPress SEO fine-tune by Meta SEO Pack from Poradnik Webmastera