2013年2月9日土曜日

Lightboxで記述したtitle属性をツールチップで表示させない

サムネイル画像をLightboxの機能を使ってクリック時に拡大表示したとき、title属性に記述したテキストがキャプションで表示される。

その画像にマウスオーバーしたときにツールチップでそのテキストも表示されてしまう。
簡潔なものならいいのだけど、ある程度長い文章になると、見苦しくなってしまう。



それでいろいろと調べてみた。

jQuery tooolでツールチップのカスタマイズできるので、これでなんとかなりそうかと思った。
jQuery tools,jQuery tools日本語リファレンス,日本語リファレンス

ツールチップ表示自体はいらないので、opacity:0 で表示を見かけ上隠してしまえはいいかと考えたのだが(あまりいい方法ではないのは承知)、title属性データを横取り(?)してしまうらしくLightboxのキャプション表示自体もなくなってしまったのでボツ。

Javascriptでブラウザの機能を制限できないかと思ったが、これも該当する手段を見つけられず。

それでも色々検索していたら、こんなシンプルな解決方法が見つかった。

around design
Lightboxやfancyboxのtitle属性をポップアップさせない

画像の imgタグ に title属性をつけると、そちらが優先的に表示される.


だがimg属性のtitleを空欄にしてしまうと aタグのtitle属性が表示されてしまう。



スペースを入れておくと空欄の小さいツールチップが表示される(これもちょっと不審な感じ)。



長い文章が表示されるよりましなので、簡潔なタイトルを入れておくことがよいと思われる。


完全に消すことは出来なかったけど、まあまあの解決。

0 件のコメント: