POPSブログ

jQuery tooltip/4

174

  Category:  jquery2012/12/01 pops 

要素ごとに複数個のツールチップ(tooltip)を作成する方法で、GIF背景画像を「移動フェードイン、アウト」します。簡単に作れますので自作した方が使い勝手が良いかも知れません。デザインも自由になります。

 

新たに複数のツールチップBOXを作るタイプ(GIFフェードタイプ)


前ページまでの3例では、表示する「ツールチップのBOX」を1個作る方式でしたが、このサンプルでは要素ごとに複数個の「ツールチップのBOX」を其の都度作ります。多少乱暴に扱っても大丈夫です。但し、使用画像はGIFです。原則「PNG32陰影付き透過画像」は使用出来ません(フィルター処理の不要なIE以外なら使用可能)。GIF画像であっても陰影はありませんが、見た目たいした違いはありません、むしろIEでのバグなど無く扱いやすいでしょう。


新たにツールチップのBOXを作るタイプ 3


Example / マウス位置と、要素のoffsetでの位置調整、食み出し補正。


Example3: ここをマウスでHOVERしてください。ツールチップで説明文などが表示されます。簡単なTOOLTIPです。GIF画像使用なためにフェードしてもIEでバグが出難い。表示させたい場所にクラスを設定、text属性に説明文を記述しています。
クラス設定の要素が近接している場合でもそれぞれ固有の「ツールチップのBOX」を作るため多少マウス操作が乱暴でも表示します。尚、表示されない場合はもう一度HOVERすれば表示します。

text属性がない場合は、undefined を返します。


 

下は、LI要素にtool-tip3クラスを設定しました。


下は、DIV要素にtool-tip3クラスを設定しました。( W260 x H100 )


注意、text属性は当方が勝手に作った「属性名」です。



HTML JS CSS など


HTML

文章の中に span を入れて設定した例と、あるいはボタン、divに画像を入れた例。

tool-tip3クラスを設定。text属性に説明文などを記載します。原則、書き込めるのはテキストであり、htmlは書き込めません。


spanに文章
<p>文章.....<span class="tool-tip3" text="説明文">説明文を表示するエリア。</span>文章.....</p>

divに画像
<div class="tool-tip3" text="説明文"><img src="画像URL" width="260" height="100" /></div>

JS

読み込めばすぐに実行する簡易形式です。必要な場合は、JS名、クラス名、ID名などかえて利用ください、その際には関連するCCSなども変更が必要です。

Example3 tool-tip3.js


//tool-tip3.js
//Example3
//マウス位置、要素のoffset位置で調整、text属性使用、マウス移動処理削除

(function($){

	$(function () {

		//表示位置の修正値
		var box_W=300;//チップ横幅
		var space=10;//左右のX余白
		var top_v=-80;//Y初期位置
		var move_v=20;//Y方向移動値

		var move_st=[];//Y方向受け渡し保存値
		var title_v;//タイトルの保存
		//オブジェクト代入保存用
		var tipitem=[];

		//window幅の取得
		var window_W=$(window).width();

		//ループ、カウントi付与
		$('.tool-tip3').each(function (i) {

			//hover-ACTION
			$(this).hover(
				function (e) {

					//タイトルの取得、無ければundefined
					var title_text=$(this).attr('text');

					//要素のoffset取得、Y方向はoffsetを使用
					var offset=$(this).offset();
					//var left=offset.left+left_v;
					var top=offset.top+top_v;
					//Y方向受け渡し保存値に代入
					move_st[i]=top;

					//マウス位置と補正、X方向はマウス位置を使用/左右補正
					var left=e.pageX-box_W/2;//中央補正標準
					//var top=e.pageY+top_v;//Y初期位置

					//ダイレクト左補正
					if (e.pageX < box_W/2+space) {left=space;}
					//ダイレクト右補正
					if (e.pageX > window_W-(box_W/2+space)) {left=window_W-box_W-space;}

					//tipbox個別にID名を付ける
					var box_id="tipboxs"+i;

					//残りあれば削除
					if (tipitem[i]) {tipitem[i].remove();}

					//tip-boxを作る
					$('body').append('<div id="'+ box_id +'" class="tip-box"><div class="tip-text">' + title_text + '</div></div>');
					//オブジェクト代入
					tipitem[i]=$('#'+box_id);

					//位置決定、アイテムを透明度0にする、display:blockのこと
					tipitem[i].css({'top':top,'left':left,'opacity':'0'});
					//カスタムopacityアニメY方向move_v移動
					tipitem[i].animate({'opacity':'1','top':top+move_v},400,function(){
						//事後処理
					});

				},
				function (e) {

					//カスタムopacityアニメY方向移動/Y方向受け渡し保存値を使用
					tipitem[i].animate({'opacity':'0','top':move_st[i]},200,function(){
						//アニメ終了、tipboxを削除
						tipitem[i].remove();
					});

				}

			);

		});

	});

})(jQuery);

title属性を利用していません。勝手に作った「text属性」を使用しています。(影響はありませんが、HTML規則違反になります)


CSS

サンプルでのCSSの例です。現実には、ツールチップ(tip-box)のCSSがあればよい。


/* tool-tip3.css 日本語 */

/* Example3 */
.tool-tip3 {
cursor:default;/*pointer*/
}
span.tool-tip3 {
width:auto;
height:20px;
background-color:#DDDDDD;
}

#link-sample {
display:block;
width:540px;
height:40px;
margin-left:50px;
_margin-left:25px;
}
#link-sample ul {
display:inline;
width:auto;
height:40px;
}
#link-sample li {
display:block;
list-style:none;
width:120px;
height:38px;
margin-left:50px;
_margin-left:25px;
background:url('/main/images/demo_btn.gif') no-repeat;
float:left;
}

.tip-box {
display:block;
position:absolute;
left:0;top:0;
width:300px;
height:60px;
margin:0;
padding:0;
background:url('/main/images/tip_back_bk2.gif') no-repeat;
background-color:transparent;
}

.tip-box .tip-text {
height:50px;
margin:5px 5px 0 10px;
text-align:left;
font-style:normal;
font-size:11px;
/font-size:75%;/*IE67*/
color:#FFFFFF;
overflow:hidden;
}

背景画像URLは使用者のURLと合わせてください。

現在、上記CSSでは、「span.tool-tip3」クラスに「背景色」が設定されています。文章以外の場所に「tool-tip3」クラスを指定するときなどは、適せんにCSSを書き換えてください。
「IE6.7」で font-size の指定が効かないので、ハックで 75% 指定にしています。使用ページの状況にあわせてください。


簡単な解説


説明図


図のようにY方向を、要素のoffset取得、offset値で制御、X方向はマウスイベントのe.pageX を使用しています。左右の「チップ食み出し」修正は画面横幅を取得して判定修正しています。
以前、$(window).width()は一部不正確でしたが、最近は正確に取得するようです。但しブラウザの状態により「不正確」なところも有り得るかも知れません。単なる、ツールチップ表示ですから影響はないと思います。


1. 前ページのものと違い、要素ごとにツールチップを作る方法なためにアニメタイムを長くできます。
2. 少々せわしくマウスを動かしても動作するのが特徴です。アニメ処理も簡単です。
3. 左右に「食み出し」ても文字が読める様に位置を修正します(隙間の大きさ設定可能)。中間ではマウス位置が中心になります。
4. ツールチップ位置、及び移動距離などはJSの上部で設定できます。JS参照。
5. ツールチップに、「id」名を付与していますので動作が早く的確です。(#tipboxs0 #tipboxs1 ......)
6. 画面幅は$(window).width();で取得しています。スクロール修正はしていません。
7. GIF画像使用ですので、IEバージョン違いでのバグが出難い。(構造を複雑にするれば別)
8. IEのフィルターでドロップシャドウなど処理しないでください。フェードでバグがでます。(フェード後にフィルター処理は可能ですが、バグ除去のため繁雑になります)


ツールチップを個別に作っていますので、HOVER-OUTアクションを無効にして、CLICKアクションに換えて実装すれば、其の都度「閉じる」ボタンを押して終了させる形式になります。但し.hover()、または.mouseover()を使用して作るかは意見の分かれるところと思います。


ブラウザ、IE6 7 8 9、Safari Firefox Chrome Opera、対応。(IE10は確認、大丈夫と思う)



使用画像など

原則、表示する文字の長さなどを考慮して、画像は使用者が制作します。

サンプル、GIF画像 tip_back_bk2.gif / tip_back_wh2.gif (300x60)、tip_back_bk3.gif / tip_back_wh3.gif (300x60)、

tip_back_bk2.gif(サンプル使用) tip_back_wh2.gif
tip_back_bk3.gif tip_back_wh3.gif

前のページは、PNG32陰影付き透過画像を使用したフェードタイプ、「IE7」でのバグを修正したものです。

【参考】当方の記事: jQuery tooltip 3


以上です。

 


[ この記事のURL ]


タグ:series , memo , jquery , tooltip

[ jQuery tooltip シリーズ記事 ]

jQuery tooltip/82012.12.13
jQuery tooltip/72012.12.12
jQuery tooltip/62012.12.04
jQuery tooltip/52012.12.02
jQuery tooltip/42012.12.01
jQuery tooltip/32012.11.30
jQuery tooltip/22012.11.30
jQuery tooltip/12012.11.27

 

ブログ記事一覧

年別アーカイブ一覧



[1]