Tipsy is a jQuery plugin that creates a Facebook-like tooltips effect based on an anchor tag’s title attribute. It’s a lightweight and stylish way to offer simple tooltips, making it easier for users to understand interface elements or get more context on specific content.


  1. Customizable: Offers various options for tooltip positioning, fade durations, and more.
  2. Gravity Support: Allows tooltips to be positioned to the north, south, east, or west of the target element.
  3. Live Event Binding: Supports dynamic elements added to the DOM after page load.
  4. Fade Effects: Smooth fade-in and fade-out animations for a polished look.


  • User Experience: Enhances user understanding with intuitive tooltips.
  • Lightweight: Doesn’t bloat your website, ensuring faster load times.
  • Stylish: Provides a modern, Facebook-like tooltip design.
  • Cross-browser: Works seamlessly across various browsers.


Getting Started:

To get started with Tipsy, you’ll need to include jQuery and then the Tipsy library:

<!-- jQuery library -->
<script src=""></script>
<!-- Tipsy CSS and JS -->
<link rel="stylesheet" href="path_to_tipsy/stylesheets/tipsy.css">
<script src="path_to_tipsy/javascripts/jquery.tipsy.js"></script>

Advanced Examples:

  1. Basic Tooltip:
  1. Tooltip with Custom Gravity:
$('.element').tipsy({ gravity: 'w' });  // Tooltip will appear to the left (west) of the element
  1. Fade Effect:
$('.element').tipsy({ fade: true });
  1. Delay in Tooltip Appearance:
$('.element').tipsy({ delayIn: 500 });  // Tooltip will appear after a 500ms delay
  1. HTML Content in Tooltip:
  title: function() {
    return '<strong>HTML</strong> content here';
  html: true 

Tipsy is a simple yet effective jQuery plugin that enhances the user experience by providing stylish tooltips. Its ease of use, combined with its customization options, makes it a popular choice for developers looking to add tooltips to their web projects.