Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Forked version of tipsy with multiple pull requests applied.
JavaScript CSS Ruby
branch: master

This branch is 89 commits ahead of jaz303:master

Merge pull request #7 from Pitouli/patch-1

Remove recursive width diminution
latest commit 0be0545695
@CloCkWeRX authored
Failed to load latest commit information.
docs Pull request #100
src Remove recursive width diminution
.gitignore HTML test file excluded
LICENSE Reorganisation Merge
Rakefile Version 1.0.0a


Facebook-style tooltip plugin for jQuery

(c) 2008-2010 Jason Frame (

Released under The MIT License.


tipsy is a simple jQuery plugin for generating Facebook-style tooltips.

It's used by Twitter, Github, Slideshare and Bitbucket, amongst others.



Hosted at GitHub; browse at:

Or clone from:



  1. Copy the contents of src/{javascripts,stylesheets} to the corresponding asset directories in your project.

  2. Insert the neccesary elements in your document's <head> section, e.g.:

    <script type='text/javascript' src='/javascripts/jquery.tipsy.js'></script>
    <link rel="stylesheet" href="/stylesheets/tipsy.css" type="text/css" />

    Remember to include jquery.tipsy.js after including the main jQuery library.

  3. Initialise Tipsy in your document.onload, e.g.:

    <script type='text/javascript'>
     $(function() {
       $('a[rel=tipsy]').tipsy({fade: true, gravity: 'n'});

Since jQuery 1.9, 'live' tipsy expects selector as live option, e.g:

        live: '.live-tooltip'


You can add shadow to Tipsy like this :

<script type='text/javascript'>
     $(function() {
     $('a[rel=tipsy]').tipsy({fade: true, gravity: 'n', shadow: true, shadowBlur: 10, shadowOpacity: 1, shadowSpread: 1});

Please refer to the docs directory for more examples and documentation.

Something went wrong with that request. Please try again.