How to put 0.5s Transition in Tooltips

Asked

Viewed 109 times

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

html css html5 css3 tooltip

  • look at this link https://answall.com/questions/127898/tooltip-css-transition

  • Possible duplicate of Tooltip CSS Transition

3 answers

2

Use the property transition, in this way:

Transition: propriedade tempo;

ex: I want to transition the opacity in 0.5 seconds:

.tooltip-white span {
    opacity: 0.8;
    transition: opacity 500ms;
}
.tooltip-white span:hover {
    opacity: 0;
}

I hope I’ve helped!

  • Only Transition is not working in this code. strange

  • Where are you using Transition? The correct place would be in the "parent element", for example, I have an H1, and an H1:Hover, Transition would be applied on H1, and the desired transition on H1:Hover, logically adapted to the tooltip. Transition by itself only determines the duration of the transition and the selected property.

  • Had put Transition in . tooltip-white, . tooltip-black and span, to test, but it didn’t work.

  • Add a rule as follows: .tooltip-white span:hover (for the transition to happen during the mouse pass), and within that rule, change the property you wanted to make the transition, for example, color: blue. This rule will take the transition time of the rule transition applied in the .tooltip-white span

1

You need to adjust some things in your code. See below:

  1. Change the display:none and display: block for opacity: 0 and opacity: 1 respectively
  2. Remove all calls to :hover to apply tooltip formatting, the :hover will only show hide the tooltip.
  3. Add transition: all linear .3s; in the parent elements.

Note: (.3s equals to 300ms. Adjustment for your need) 

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>

  • Your code is something that needed, however, if it were not a problem would use it, when you take the mouse under the "open Tooltips", in the blank space, it opens the tooltip.

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>

Browser other questions tagged html css html5 css3 tooltip

You are not signed in. Login or sign up in order to post.