Easy Animated Tooltip Plugin For jQuery - TtT

Yet another jQuery tooltip plugin for attaching highly customizable tooltips to any DOM elements with fadeIn / fadeOut effects based on jQuery animations.

Basic usage:

1. Add jQuery JavaScript library and the jQuery TtT plugin to your web pages.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="Title.to.Tooltip.js"></script>

2. Create a tooltip from title attribute of your element.

<div id="demo" title="Hello World">Mouse Over Me</div>

$("#demo").addTtT();

3. Set tooltip content in the JavaScript

<div id="demo" title="Hello World">Mouse Over Me</div>

$("#demo").addTtT({text : "Hello World!"});

4. Create a tooltip programmably.

<div id="demo" title="Hello World">Mouse Over Me</div>

$("#demo").addTtT({
  text : function(){
    var dt = new Date();
    return "The time is\r\n" + dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
  }
});

5. Add your own CSS styles to the tooltips.

.TtT {
  position: absolute;
  max-width: 300px;
  padding: 20px;
  border: 1px lightgrey solid;
  border-radius: 5px;
  background-color: white;
  margin-top: -10px;
  pointer-events: none;
}

.TtTpointer {
  position: absolute;
  border-style: solid;
  border-width: 10px;
  margin: -20px 0 0 0;
  border-color: transparent transparent white transparent;
  pointer-events: none;
}

6. Full customization options with default values.

$("#demo").addTtT({

  // fadeIn / fadeOut animation speed
  fadeTime: 500,

  // the attribute name to draw the tooltip from
  attrName: "title",

  // If true, the existing attribute will be removed after its value has been captured.
  removeAttr: true,

  // CSS class for tooltips
  className : "TtT" ,

  // delay
  delay: 500,

  // the delay (in milliseconds) before a tooltip is displayed
  drawPointer: false ,

  // The class name to apply to the pointer.
  pointerClassName: "TtTpointer",

  // If true, a styleable element will be drawn at the top of the tooltip
  drawPointer: false,

  // tooltip text/function
  text: ''
  
});

---

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