queryのtooltip関連質問です。複数のイメージに別個のtool

質問

queryのtooltip関連質問です。複数のイメージに別個のtooltipを使用したいのですが、問題は titleに入る文字数が増えた場合、
jqueryのtooltip関連質問です。
http://flowplayer.org/tools/demos/tooltip/index.html
上のページのように複数のイメージに別個のtooltipを使用したいのですが、
問題は titleに入る文字数が増えた場合、

背景画像の範囲を超えて表示されてしまいます。

ここで考えられるのは、別個の背景画像を用意して、

divのidを変える、cssのクラスを変えることでちゃんと分けて表示されると思われますが、

そのやり方では反映されないのです。

（もしくはscript分で処理しないといけないかも知れないような気もしますが...）

こちらについて解決できる方はいらっしゃいませんか？！

回答No.2

my--

//tooltip.jsから抜粋
// autogenerated tooltip
if (title) {

　//title文字数に応じてクラス名(tooltip)に数字を付加（50単位で増加）
　var className = conf.tipClass + Math.floor(title.length / 50);
　//要素生成、クラス名設定、body要素に追加挿入、非表示、title挿入
　tip = $(conf.layout).addClass(className).appendTo(document.body)
　　.hide().append(title);

　// single tip element for all
} else if (conf.tip) ...

title属性に対応したtooltip要素（div）を生成しているのがここです。
title文字数に応じたクラス名を個別に設定するならこんな感じでしょうか。

回答No.1

fujillin

jqueryもよく知りませんが…
デモページをざっと眺めた程度ですけれど、

＞背景画像の範囲を超えて表示されてしまいます。
どういう事象かちょっとわかりませんけれど、用意した背景画像が小さすぎるのであれば、repeat可能な背景にしておけばよいだけでは？
サイズをきちんと固定したいのであれば、サイズを指定してかつoverflow:hiddenにしておけばはみ出した部分はカットされます。

違うCSSを適用させたいのであれば、
標準パターンだと無条件で　.tooltipのCSSが適用されるので、HTMLを表示させるパターン（↓）にしておいて、その部分に別のCSSをオーバーライドしてやれば可能みたい。（確認していませんが、表示要素を生成していると思われます）
　http://flowplayer.org/tools/demos/tooltip/any-html.html
class="tooltip test"みたいにして、display:noneなどはそのままにしておいて、詳細度の高い指定方法で(div.testとか）背景やサイズを上書きすれば、そちらのほうが優先されるので違うものを適用できます。（確認済）

「標準パターンは無条件」と（↑）に書きましたが、イベントのフックも可能になっているみたいなので、beforeshowなどで個別に変更してあげることもできそうです。（tooltipのクラス名はそのままにしておいたほうが良いと想像しますが、表示デザインは変えても多分問題なく動作するのでは？）（こちらは未確認）
　http://flowplayer.org/tools/tooltip/index.html