<html>
<head>
<style>
a.tooltip-black, a.tooltip-white {
position: relative;
color: red;
text-decoration: none;
cursor: help;
}
a.tooltip-black:hover, a.tooltip-white:hover {
background: transparent;
color: #f00;
z-index: 25;
}
a.tooltip-black span, a.tooltip-white span {
display: none
}
a.tooltip-black:hover span, a.tooltip-white:hover span {
display: block;
position: absolute;
width: 210px;
/*top: 25px;*/
left: 0;
font-size: 14px;
padding: 5px;
border-radius: 3px;
}
a.tooltip-black:hover span:after, a.tooltip-white:hover span:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: -18px;
left: 10px;
}
a.tooltip-black:hover span:before, a.tooltip-white:hover span:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -20px;
left: 10px;
}
/* ----- Definindo as cores ----- */
a.tooltip-black:hover span {
background: rgba(0,0,0,0.7);
border: 1px solid #999;
color: white;
}
a.tooltip-white:hover span {
background: white;
border: 1px solid #999;
color: black;
}
a.tooltip-black:hover span:after {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #4c4c4c transparent;
}
a.tooltip-white:hover span:after {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent white transparent;
}
a.tooltip-black:hover span:before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #999 transparent;
}
a.tooltip-white:hover span:before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #999 transparent;
}
</style>
</head>
<body>
<!-- Tooltip em Textos -->
<p>Teste Tooltip basico
<a href="#" class="tooltip-black"><strong>"Abrir Tooltips"</strong>
<span>Exemplo de utilização de tooltips com Texto sem JavaScript</span></a></p>
</body>
</html>
-
olha esse link pt.stackoverflow.com/questions/127898/tooltip-css-transition– RenanCommented 6/06/2019 às 15:00
-
Possível duplicata de Tooltip CSS transition– RenanCommented 6/06/2019 às 15:01
Adicione um comentário
|
3 Respostas
Utilize a propriedade transition
, desta forma:
Transition: propriedade tempo;
ex: Quero transicionar a opacidade, em 0,5 segundos:
.tooltip-white span {
opacity: 0.8;
transition: opacity 500ms;
}
.tooltip-white span:hover {
opacity: 0;
}
Espero ter ajudado!
-
Só que o Transition não esta funcionando neste código. estranho Commented 6/06/2019 às 14:32
-
Onde você está usando o transition? O lugar correto seria no "elemento pai", por exemplo, tenho um h1, e um h1:hover, o transition seria aplicado no h1, e a transição desejada no h1:hover, logicamente adaptado para o tooltip. O transition por si só, apenas determina a duração da transição e a propriedade selecionada. Commented 6/06/2019 às 14:34
-
Tinha colocado o transition no .tooltip-white, .tooltip-black e span, para fazer teste, mas não funcionou. Commented 6/06/2019 às 14:39
-
Adicione uma regra da seguinte forma:
.tooltip-white span:hover
(para a transição acontecer durante a passagem do mouse), e dentro dessa regra, altere a propriedade que você queria fazer a transição, por exemplo,color: blue
. Esta regra irá levar o tempo de transição da regratransition
aplicada no.tooltip-white span
Commented 6/06/2019 às 14:41
Você precisa Ajustar algumas coisas no seu código. Veja abaixo:
- Trocar o
display:none
edisplay: block
poropacity: 0
eopacity: 1
respectivamente - Remover todas as chamadas ao
:hover
para já aplicar a formatação da tooltip, o:hover
será somente para exibir ocultar a tooltip. - Adicionar
transition: all linear .3s;
nos elementos pai.
Nota: (.3s equivale a 300ms. Ajuste para a sua necessidade)
a.tooltip-black, a.tooltip-white {
position: relative;
color: red;
text-decoration: none;
cursor: help;
}
a.tooltip-black, a.tooltip-white {
background: transparent;
color: #f00;
z-index: 25;
}
a.tooltip-black:hover .tooltip-content, a.tooltip-white:hover .tooltip-content {
opacity: 1;
}
a.tooltip-black .tooltip-content, a.tooltip-white .tooltip-content {
display: block;
position: absolute;
width: 210px;
/*top: 25px;*/
left: 0;
font-size: 14px;
padding: 5px;
border-radius: 3px;
opacity: 0;
transition: all linear .3s;
}
a.tooltip-black .tooltip-content:after, a.tooltip-white .tooltip-content:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: -18px;
left: 10px;
}
a.tooltip-black .tooltip-content:before, a.tooltip-white .tooltip-content:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -20px;
left: 10px;
}
/* ----- Definindo as cores ----- */
a.tooltip-black .tooltip-content {
background: rgba(0,0,0,0.7);
border: 1px solid #999;
color: white;
}
a.tooltip-white .tooltip-content {
background: white;
border: 1px solid #999;
color: black;
}
a.tooltip-black .tooltip-content:after {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #4c4c4c transparent;
}
a.tooltip-white .tooltip-content:after {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent white transparent;
}
a.tooltip-black .tooltip-content:before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #999 transparent;
}
a.tooltip-white .tooltip-content:before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #999 transparent;
}
<!-- Tooltip em Textos -->
<p>
Teste Tooltip basico
<a href="#" class="tooltip-black">
<strong>"Abrir Tooltips"</strong>
<span class="tooltip-content">
Exemplo de utilização de tooltips com Texto sem JavaScript
</span>
</a>
</p>
-
Seu código é algo que precisava, porém, se não fosse um probleminha utilizaria ele, quando você leva o mouse em baixo do "abrir Tooltips", no espaço em branco, ele abre o tooltip. Commented 6/06/2019 às 16:34
a.tooltip-black,
a.tooltip-white {
position: relative;
color: red;
text-decoration: none;
cursor: help;
}
a.tooltip-black:hover,
a.tooltip-white:hover {
background: transparent;
color: #f00;
z-index: 25;
}
a.tooltip-black span,
a.tooltip-white span {
position: absolute;
width: 210px;
top: 100%;
margin-top: 3px;
left: -10000px;
opacity: 0;
font-size: 14px;
padding: 5px;
border-radius: 3px;
}
a.tooltip-black:hover span,
a.tooltip-white:hover span {
left: 0;
opacity: 1;
transition: .5s step-end opacity;
}
a.tooltip-black:hover span:after,
a.tooltip-white:hover span:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: -18px;
left: 10px;
}
a.tooltip-black:hover span:before,
a.tooltip-white:hover span:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: -20px;
left: 10px;
}
/* ----- Definindo as cores ----- */
a.tooltip-black:hover span {
background: rgba(0, 0, 0, 0.7);
border: 1px solid #999;
color: white;
}
a.tooltip-white:hover span {
background: white;
border: 1px solid #999;
color: black;
}
a.tooltip-black:hover span:after {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #4c4c4c transparent;
}
a.tooltip-white:hover span:after {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent white transparent;
}
a.tooltip-black:hover span:before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #999 transparent;
}
a.tooltip-white:hover span:before {
content: "";
border-width: 10px;
border-style: solid;
border-color: transparent transparent #999 transparent;
}
<p>Teste Tooltip basico
<a href="#" class="tooltip-black">
<strong>"Abrir Tooltips"</strong>
<span>Exemplo de utilização de tooltips com Texto sem JavaScript</span>
</a>
</p>