Bubble Popupは、フキダシをいろいろなdom要素にマウスオーバーすることで表示するプラグインですが、余りいろいろなイベントを使用したサンプルがありません。
マウスクリックやフォーカスにも対応できます。
テキストボックスのフォーカスに対応した使い方をネット検索したところ、英語ページでプラグイン自体の改造を要する対応以外見つからなかったので、メモっておきます。
参照
Bubble Popup：Max Vergelli.
マウスクリックでツールチップを行う。JAVAdomain
現在Bubble PopupはV3.0です。
ダウンロードしたBubble Popupに付属されているサンプル「test-jquery-bubble-popup.html」の以下で指定する部分のロジックを変更・追加します。
$(‘.button’).CreateBubblePopup({
↓
$(‘.button’).focus(function() {
$(‘.button’).CreateBubblePopup();
var focus_get = $(this);
focus_get.ShowBubblePopup({
※43行目に追加
manageMouseEvents: ‘fales’,
※48行目に追加
$(‘.button’).blur(function() {
$(focus_get).HideBubblePopup();
});
※65行目のdivをinputに変更
＜div class=”button”\＞mouse over here!＜/div＞
↓
＜input class=”button” type=”text” /＞
以上
サンプル（thtmlのみ。拡張子をtxt→htmlに変更して、Bubble Popupのダウンロードフォルダにコピーして実行してみてください）
・・・噴出しの色や文面をちょっと変えてます（～～）
TrackBack URI : http://njcfactory.com/bbg/wp-trackback.php?p=489
Comments (0)