CSS3 Animated Tooltip With Duration - jQuery animatedToolTip

animatedToolTip is a simple, lightweight jQuery plugin used for creating CSS3 animated tooltips that auto dismiss after a timeout you specify.

How to use it:

1. The plugin depends on the jQuery library, so be sure to include it within your markup:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>

2. Download and insert the animatedToolTip plugin's files into the document.

<script src="animatedToolTip.js"></script>
<link href="animatedToolTip.css" rel="stylesheet">

3. Create a new tooltip on a DOM element you specify.

jQuery(document).ready(function(){
  jQuery(".element").animatedToolTip({
    content:'Your Tooltip Content Here'
  })
});

4. By default, the tooltip will auto hide after 10 seconds. You can override the default duration in the JavaScript as this:

jQuery(document).ready(function(){
  jQuery(".element").animatedToolTip({
    content:'Your Tooltip Content Here',
    duration:10
  })
});

5. To customize the default bounce animation:

@keyframes 
  bounce { from {
  margin-top:0px;
  margin-left:0px;
  opacity:0.5
}

to {
  margin-top: 20px;
  opacity: 1
}
}

@-webkit-keyframes 
  bounce { from {
  margin-top:0px;
  margin-left:0px;
  opacity:0.5
}

---

This awesome jQuery plugin is developed by ankahla. For more Advanced Usages, please check the demo page or visit the official website.