1

Estou construindo um efeito Tooltip que exibe as definições de termos específicos, mas estou encontrando problemas ao ter que adicionar uma seta acima da pequena caixinha. Confiram o CSS do código logo seguido pelo HTML abaixo:

CSS

a.tooltip {
    position: relative;
    padding: 0;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px dotted #133783;
    cursor: help;
    z-index: 25;
}
a.tooltip:hover {
    border: none;
    height: auto;
    background: transparent;
    color: #133783;
    z-index: 25;
}
a.tooltip span {
    display: none
}
a.tooltip:hover span {
    display: block;
    position: absolute;
    width: 290px;
    top: 2em;
    right-align: justify;
    left: 0;
    font: 12px arial, helvetica, sans-serif;
    padding: 5px 10px;
    border: 1px solid #133783;
    background: #E3E3E3;
    color: #000;
    font: 11px arial, verdana, helvetica, sans-serif;
}

HTML

<a href="#" class="tooltip">HTML<span><strong>HTML:</strong> É uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.</a>
2
  • Não entendi muito bem o que você precisa. Tem como demonstrar num desenho simples ? Commented 22/09/2015 às 13:43
  • Para ser mais específico, enviarei uma imagem: (i.imgur.com/Hsl44k3.png), confira a seta acima do efeito Tooltip, que exibe definições de termos.
    – user33070
    Commented 22/09/2015 às 13:54

2 Respostas 2

2

Você pode usar um pseudo-element, como o before.

http://jsfiddle.net/13s7j1kd/2/

a.tooltip {
    position: relative;
    padding: 0;
    color: #000000;
    text-decoration: none;
    border-bottom: 1px dotted #133783;
    cursor: help;
    z-index: 25;
}
a.tooltip:hover {
    border: none;
    height: auto;
    background: transparent;
    color: #133783;
    z-index: 25;
}
a.tooltip span {
    visibility: hidden;
    position: absolute;
    width: 290px;
    top: 10em;
    text-align: justify;
    left: 0;
    font: 12px arial, helvetica, sans-serif;
    padding: 5px 10px;
    border: 1px solid #133783;
    background: #E3E3E3;
    color: #000;
    font: 11px arial, verdana, helvetica, sans-serif;
    opacity: 0;
    transition: all 0.3s ease;
}
a.tooltip:hover span {
    visibility: visible;
    opacity: 1;
    top: 3em;
}

a.tooltip span:before{
    content: "";
    position: absolute;
    left: 8px;
    top: -7px;
    width: 15px;
    height: 15px;
    transform: rotateZ(45deg);
    background-color: #E3E3E3;
    border: 1px solid #333;
}

a.tooltip:hover span:before{
    opacity: 1;
    z-index: -1;
}
5
  • Diego, nem sei como te agradecer, o efeito está quase completo! Mas antes de encerrar o tópico, é possível deixar esse efeito mais lento e inserir links dentro da pequena caixa? Desde já agradeço.
    – user33070
    Commented 22/09/2015 às 14:06
  • Como assim inserir dentro ? Commented 22/09/2015 às 14:08
  • Diego, inserir uma palavra linkada dentro do efeito Tooltip, mas isso só funcionaria se modificarmos um pouco o CSS. E no que se refere ao efeito ficar mais lento, como posso fazer isso?
    – user33070
    Commented 22/09/2015 às 14:12
  • Atualizei o post Bruno. Mas não entendi ainda o esquema da palavra aí... Commented 22/09/2015 às 14:27
  • 1
    Diego, agradeço pela resposta definitiva. Eu tinha esquecido que eu poderia ter utilizado a propriedade transition! Agora o código ficou completo. Abraço.
    – user33070
    Commented 22/09/2015 às 14:30
1

Simplesmente altere essa propriedade do css do a.tooltip:

a.tooltip {
    cursor: pointer;
}

exemplo: http://jsfiddle.net/ehg8vkj3/

caso não seja isso o que você queira, favor comentar antes de negativar.

Você deve fazer log-in para responder a esta pergunta.