Tipsy jQuery Tooltip Plugin - Is it possible to use more than one style?

I am using the jQuery Tipsy 开发者_JS百科tooltip plugin (http://onehackoranother.com/projects/jquery/tipsy/). I have it working fine.

However, I am unable to use more than one style (CSS). I need to use 3 differently styled tooltips on my site. I can only manage to use the one style.

Any help with this would be much appreciated.

Cheers in advance.

There is no need to fork tipsy, it already handles it via the 'className' option. Any classes you specify there will be added to the outermost div of the tooltip.

For example, if you want to change the tooltip background and arrow colours to blue, call tipsy like this:

<script type='text/javascript'>
    jQuery(function($) {
        $('a[rel=tipsy]').tipsy({className: 'my-class'});
    });
</script>

Then add this CSS:

.my-class .tipsy-inner { background-color: blue; }

.my-class .tipsy-arrow-n { border-bottom-color: blue; }
.my-class .tipsy-arrow-s { border-top-color: blue; }
.my-class .tipsy-arrow-e { border-left-color: blue; }
.my-class .tipsy-arrow-w { border-right-color: blue; }

From reading the tipsy source, it looks like you can even give it a callback (accepting the selected element as a parameter), so that you can dynamically add classes.

I have made the changes and applied a patch to the owner. Please take a look at the following patch which will allow customized style.

JS

https://github.com/rakesh-sankar/tipsy/blob/patch-1/src/javascripts/jquery.tipsy.js

CSS

https://github.com/rakesh-sankar/tipsy/blob/patch-2/src/stylesheets/tipsy.css

Now call like this:

<script type='text/javascript'>
    $(function() {
        $('a[rel=tipsy]').tipsy({clsStyle: 'blue'});
    });
</script>

Your CSS should read:

.blue-tipsy {.....}

.blue-tipsy-inner {....}

.blue-tipsy-arrow {....}

See working example here