Tipsy jQuery Tooltip Plugin - 複数のスタイルを使用できますか？

Question

私はjQuery Tipsyのツールチッププラグイン（http://onehackoranother.com/projects/jquery/tipsy/）を使用しています。私はそれが正常に動作している。

ただし、複数のスタイル（CSS）を使用することはできません。私は私のサイトで3つの異なるスタイルのツールチップを使用する必要があります。私はその1つのスタイルだけを使うことができます。

これについてのお手伝いがあれば幸いです。

事前に乾杯。

Answer 1

私は変更を加え、所有者にパッチを適用しました。カスタマイズされたスタイルを可能にする次のパッチを見てください。

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

は次のように呼び出す：

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

あなたのCSSは次のようになります。

.blue-tipsy {.....} 

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

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

はほろ酔いフォークする必要はありませんworking example here

Answer 2

参照してください、それはすでに「className」のオプションを使用して、それを処理します。指定したクラスは、ツールチップの最も外側のdivに追加されます。

あなたが青にツールチップの背景と矢印の色を変更したい場合たとえば、このようなほろ酔い呼び出す：

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

を次に、この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; } 

ほろ酔いのソースを読んでからは、 、それはあなたが動的にクラスを追加することができるようにコールバック（パラメータとして選択された要素を受け入れる）を与えることさえできるように見えます。