Animated ToolTip With Minimal Script

Animated ToolTip

Introduction

Tooltip helps to enhance a UI. It helps to give users some extra information about a particular section. The information can be used for various purposes like reassuring for a button click, or a short description of an image, a meaningful message that explains a section, and many more. 


Here, We have created 14 different tooltip effects using simple HTML and CSS properties. Each tooltip has some unique effect. When a user hovers on the given text an animated tooltip pops up which goes off on moving the mouse out of that area. You can use the below-mentioned code for adding a different effect to your tooltip. Go ahead and try them all.

Please check Demo here.

 

Fade tooltip effect:

  • Simple fade-in/out effect of tooltip on hover of text
  • Property: transform: translate3d(x, y ,z);


HTML:	
	<div class="animation-tooltip fade">
        <div class="animation-title">Fade</div>
        <div class="animation-tooltip-text">tooltip text here</div>
</div>

	SASS:
	Add this sass effect to every css you use…

	/* Default fade effect */
.animation-tooltip {
  .animation-tooltip-text {
    opacity: 0; /*For hide tooltip message*/
  }
  &:hover {
    .animation-tooltip-text {
      opacity: 1; /*For show tooltip message*/
    }
  }
}

/* fade */
.fade {
  .animation-tooltip-text {
    transform: translate3d(0,-10px,0);
    transition: all .3s ease 0s;
  }
  &:hover {
    .animation-tooltip-text {
      transform: translate3d(0,0,0);
    }
  }
}

 

Expand tooltip effect:

  • Expand effect of tooltip on hover of text
  • Property: transform: scale3d(x, y ,z);
HTML:	
<div class="animation-tooltip expand">
        <div class="animation-title">Expand</div>
        <div class="animation-tooltip-text">tooltip text here</div>
</div>

	SASS:
/* Expand */
.expand {
  .animation-tooltip-text {
    transform: scale3d(.2,.2,1);
    transition: all .2s ease-in-out;
  }
  &:hover {
    .animation-tooltip-text {
      transform: scale3d(1,1,1);
    }
  }
}

 

Swing tooltip effect:

  • Tooltip swings from vertical position to horizontal position
  • Property: transform: translate3d(x, y ,z) rotate3d(x, y, z, angle);
HTML:	
<div class="animation-tooltip swing">
        <div class="animation-title">Swing</div>
        <div class="animation-tooltip-text"tooltip text hereT</div>
    </div>

	SASS:
/* Swing */
.swing {
  .animation-tooltip-text {
    transform: translate3d(0, 30px, 0) rotate3d(0, 0, 1, 60deg);
    transform-origin: 0 0;
    transition: all .3s ease 0s;
  }
  &:hover {
    .animation-tooltip-text {
      transform: translate3d(0 ,0, 0) rotate3d(1, 1, 1, 0deg);
    }
  }
}

 

Squeeze-top tooltip effect:

  • Tooltip appears expanding from top  
  • Property: transform: translateY($value) scale($value);
HTML:	
<div class="animation-tooltip squeeze-top">
        <div class="animation-title">squeeze Top</div>
        <div class="animation-tooltip-text">tooltip text here</div>
</div>

	SASS:
	/* squeeze top */
.squeeze-top {
  .animation-tooltip-text {
    transform: translateY(-60px) scale(0.5);
    transition: transform .3s ease-in-out, opacity .2s;
  }
  &:hover {
    .animation-tooltip-text {
      transform: translateY(0) scale(1);
    }
  }
}

 

Squeeze-bottom tooltip effect:

  • Tooltip appears expanding from bottom  
  • Property: transform: translateY($value) scale($value);
HTML:	
<div class="animation-tooltip squeeze-bottom">
        <div class="animation-title">squeeze bottom</div>
        <div class="animation-tooltip-text">tooltip text here</div>
 </div>

	SASS:
/* squeeze bottpm */
.squeeze-bottom {
  .animation-tooltip-text {
    transform: translateY(60px) scale(0.5);
    transition: transform .3s ease-in-out, opacity .2s;
  }
  &:hover {
    .animation-tooltip-text {
      transform: translateY(0) scale(1);
    }
  }
}

 

Flip tooltip effect:

  • Tooltip flips in horizontal direction
  • Property: transform:rotateY(angle);
HTML:	
<div class="animation-tooltip flip">
        <div class="animation-title">Flip</div>
        <div class="animation-tooltip-text">tooltip text here</div>
    </div>

	SASS:
/* flip */
.flip {
  .animation-tooltip-text {
    transform: rotateY(180deg);
    transition: transform .5s ease-in-out, opacity .3s;
  }
  &:hover {
    .animation-tooltip-text {
      transform: rotateY(0);
    }
  }
}

 

Rotate tooltip effect:

  • Tooltip rotates in vertical direction
  • Property:  transform: translateY($value) scale($value) rotate(angle);
     
HTML:	
<div class="animation-tooltip rotation">
        <div class="animation-title">Rotation</div>
        <div class="animation-tooltip-text">tooltip text here</div>
</div>

	SASS:
/* rotation */
.rotation {
  .animation-tooltip-text {
    display: flex;
    height: 100px;
    width: 150px;
    align-items: center;
    border-radius: 100%;
    transform: translateY(20px) scale(0) rotate(-180deg);
    transition: transform .5s ease-in-out, opacity .3s;
    transform-origin: 50% 100%;
  }
  &:hover {
    .animation-tooltip-text {
      transform: translateY(0) scale(1) rotate(0deg);
    }
  }
}

 

Left-to-right tooltip effect:

  • Tooltip rotates from left to right starting from bottom
  • Property: transform: rotate(angle) translateX($value);
     
HTML:	
<div class="animation-tooltip left-right">
        <div class="animation-title">left-right</div>
        <div class="animation-tooltip-text">tooltip text here</div>
</div>


	SASS:
/* Left to Right */
.left-right {
  .animation-tooltip-text {
    transform:rotate(-35deg) translateX(-30px);
    transition: transform .5s ease-in-out, opacity .3s;
  }
  &:hover {
    .animation-tooltip-text {
      transform:rotate(0) translateX(0);
    }
  }
}

 

Right-to-left tooltip effect:

  • Tooltip rotates from right to left starting from bottom
  • Property: transform: rotate(angle) translateX($value);
HTML:	
<div class="animation-tooltip right-left">
        <div class="animation-title">right-left</div>
        <div class="animation-tooltip-text">tooltip text here</div>
</div>

SASS:
/* Right to Left */
.right-left {
  .animation-tooltip-text {
    transform: rotate(35deg) translateX(30px);
    transition: transform .5s ease-in-out, opacity .3s;
  }
  &:hover {
    .animation-tooltip-text {
      transform: rotate(0deg) translateX(0);
    }
  }
}

 

Zoom-in tooltip effect:

  • Tooltip zooms in with hover
  • Property: transform: rotateX(angle) scale($value);
     
HTML:	
<div class="animation-tooltip zoom-in">
        <div class="animation-title">zoom in</div>
        <div class="animation-tooltip-text">tooltip text here</div>
</div>


SASS:
/* Zoom in */
.zoom-in {
  .animation-tooltip-text {
    transform: scale(0) rotateX(-80deg);
    transition: transform .5s ease-in-out, opacity .3s;
  }
  &:hover {
    .animation-tooltip-text {
      transform: scale(1.3) rotateX(0deg);
    }
  }
}

 

Parallel Rotation(X-axis) tooltip effect:

  • Tooltip rotates with respect to x-axis
  • Property: transform: rotateX(angle) scale($value);
HTML:	
<div class="animation-tooltip rotation-xaxis">
        <div class="animation-title">Parallel Rotation On X</div>
        <div class="animation-tooltip-text">tooltip text here</div>
</div>


SASS:
/* Rotation- X Axis */
.rotation-xaxis {
  .animation-tooltip-text {
    transform: scale(0.8) rotateX(-80deg);
    transition: transform .5s ease-in-out, opacity .3s;
  }
  &:hover {
    .animation-tooltip-text {
      transform: scale(1) rotateX(0deg);
    }
  }
}

 

Parallel Rotation(Y-axis) tooltip effect:

  • Tooltip rotates with respect to y-axis
  • Property: transform: rotateY(angle) scale($value);
     
HTML:	
<div class="animation-tooltip rotation-yaxis">
        <div class="animation-title">Parallel Rotation On Y</div>
        <div class="animation-tooltip-text">tooltip text here</div>
</div>


SASS:
/* Rotation- Y Axis */
.rotation-yaxis {
  .animation-tooltip-text {
    transform: scale(0.8) rotateY(-100deg);
    transition: transform .5s ease-in-out, opacity .3s;
  }
  &:hover {
    .animation-tooltip-text {
      transform: scale(1) rotateY(0deg);
    }
  }
}

 

Letter effect based tooltip effect:

  • Tooltip rotates and letters starts appearing in random order
  • We have also used simple jquery 
  • Property: transform: rotateZ(angle); and transform-delay: $value;
HTML:	
<div class="animation-tooltip letter-effect">
  <div class="animation-title">Letter Effect</div>
     <div class="animation-tooltip-text like-text">
        <ul>
   <li>tooltip text here</li>
         </ul>
      </div>
   </div>
</div>


SASS:
/* Letter-Effect */
.letter-effect {
  .animation-tooltip-text {
    transform: rotateZ(-180deg);
    transition: transform .5s ease-in-out, opacity .3s;
    ul {
      margin: 0;
      list-style-type: none;
      padding-left: 0;
    }
    span {
      opacity: 0;
      transition: opacity 1400ms;
      transition: transform .5s ease-in-out, opacity .3s;
      transition-delay: 800ms;
      &:nth-child(2n) {
        transition-delay: 400ms;
      }
      &:nth-child(3n) {
        transition-delay: 1200ms;
      }
      &:nth-child(4n) {
        
        transition-delay: 1600ms;
      }
      &:nth-child(5n) {
        transition-delay: 20ms;
      }
    }
  }
  &:hover {
    .animation-tooltip-text {
      transform: scale(1) rotateZ(0deg);
      span {
        opacity: 1;
      }
    }
  }
}

JQUERY:
jQuery(document).ready(function() {

  // Character wrap in span
  jQuery('.like-text ul li').html(function(index, html) {
    return html.replace(/\S/g, '<span>$&</span>');
  });

});

 

Blur text tooltip effect:

  • Tooltip rotates and letters starts appearing in from blur effect
  • This also includes the above mentioned jquery.
  • Property: transform: rotate(angle) translateX($value) rotateY(angle);
     
HTML:	
<div class="animation-tooltip tooltip">
   <div class="animation-title">Blur Text Tooltip</div>
       <div class="animation-tooltip-text like-text">
          <ul>
              <li>tooltip text here</li>
          </ul>
      </div>
  </div>
</div>

SASS:
/* Blur Tooltip */
.tooltip {
  .animation-tooltip-text {
    transform: rotate(-30deg) translateX(-30px) rotateY(-100deg);
    transition: transform .5s ease-in-out, opacity .3s;
    ul {
      margin: 0;
      list-style-type: none;
      padding-left: 0;
    }
    span {
      filter: blur(20px);
      transition: filter 2s;
    }
  }
  &:hover {
    .animation-tooltip-text {
      transform: rotate(0deg) translateX(0px) rotateY(0deg);
      span {
        filter: blur(0);
      }
    }
  }
}

 

Please check demo from here

Browser support:

Most of the CSS3  property is supported in all kinds of browsers. Below shows the list of browsers which support the above piece of codes.

 

IE Edge Firefox Chrome Safari Opera

 

Hope this blog is quickly and easily guide to for creating Animated ToolTip on your website. Need more assistance regarding Web Design Services Contact us now!