Styling css tooltip

HTML & CSS
1

Hello everybody. I wonder if I could add an animation to my tooltip. You can see it with mouse over the banner at the bottom of the pages of my website (www.culturanuova.net).
I’d like to add a simple bounce effect, like I have already in my menu (same website).

tooltip css

/* --- tooltip BEGIN --*/
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dotted black;
  text-indent: 0px !important;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 160%;
  text-align: justify;
  font-size: 80%;
  background-color: white;
  color: black;
  border-radius: var(--rounded);
  padding: 10px;
  position: absolute;
  z-index: 1000;
  bottom: 100%;
  left: 15%;
  margin-left: -60px;
  margin-bottom: 5%;
  opacity: 0;
  transition: opacity 0.7s;
  box-shadow: gray -3px 3px 4px;
}


.tooltiptext {
  min-width: 20vw}
  
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 12px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}  
    

/* --- tooltip END --*/
2

Try this:

/* --- tooltip BEGIN --*/
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  animation: bounce 1s;
}

.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dotted black;
  text-indent: 0px !important;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 160%;
  text-align: justify;
  font-size: 80%;
  background-color: white;
  color: black;
  border-radius: var(--rounded);
  padding: 10px;
  position: absolute;
  z-index: 1000;
  bottom: 100%;
  left: 15%;
  margin-left: -60px;
  margin-bottom: 5%;
  opacity: 0;
  transition: visibility 0s, opacity 0.7s linear;
  box-shadow: gray -3px 3px 4px;
}

.tooltiptext {
  min-width: 20vw;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 12px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}
/* --- tooltip END --*/

Make sure to adjust the animation timing and the transform values to fit the bounce effect you’re looking for. The example above will move the tooltip up by 30 pixels at 40% of the animation duration and then partially back down at 60% before returning to the original position.

You can play around with the timing and the scale of the translateY to get the desired effect. Also, be aware that using transform may affect the layout slightly, so ensure that the tooltip’s position remains appropriate after the bounce effect is applied.

Good luck

1 Like
3

If you just want the slide and not a bounce then you can do it more simply with this extra code :

.tooltip .tooltiptext {
 transform:translateY(100%);
 transition:visibility 0s, opacity 0.7s linear, transform 0.7s linear;
}
.tooltip:hover .tooltiptext {
    transform:translateY(0%);
}

The code should follow after your original code (or integrate it correctly into the existing code).

1 Like
4

very good, thank you!

5

Very nice, but not exactly what I was searching for.
Thank you!

EDIT

But with some modifications it fit my needs.

This is my new code:

/* --- tooltip BEGIN --*/
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip {
  position: relative;
  display: inline;
  border-bottom: 1px dotted black;
  text-indent: 0px !important;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 160%;
  text-align: justify;
  font-size: 80%;
  background-color: white;
  color: black;
  border-radius: var(--rounded);
  padding: 10px;
  position: absolute;
  z-index: 1000;
  bottom: 100%;
  left: 15%;
  margin-left: -60px;
  margin-bottom: 3%;
  opacity: 0;
/*   transition: opacity 0.7s; */
  box-shadow: gray -3px 3px 4px;
}


.tooltiptext {
  min-width: 20vw}
  
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -5px;
  border-width: 12px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}  

.tooltip .tooltiptext {
 transform:translateY(10%);
 transition:visibility 0s, opacity 0.2s linear, transform 0.4s linear;
}
.tooltip:hover .tooltiptext {
    transform:translateY(0%);
}
/* --- tooltip END --*/
2 Likes