-1

<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>

2

3 Respostas 3

2

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!

4
  • 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 regra transition aplicada no .tooltip-white span Commented 6/06/2019 às 14:41
1

Você precisa Ajustar algumas coisas no seu código. Veja abaixo:

  1. Trocar o display:none e display: block por opacity: 0 e opacity: 1 respectivamente
  2. Remover todas as chamadas ao :hover para já aplicar a formatação da tooltip, o :hover será somente para exibir ocultar a tooltip.
  3. 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>

1
  • 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
0

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>

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .