POPSブログ

jQuery tooltip/7

181

  Category:  jquery2012/12/12 pops 

hover()タイプ「tooltip 6」に遅延タイマー(setTimeout)を組み込みました。エフェクトのタイプは「拡大」「移動フェード」または「単なる表示」の指定ができます。前ページのmouseover()形式と同じですが、「拡大」のエフェクトを増やしました。

 

hover()を使用してツールチップを表示する(setTimeout)


hover()を使用、setTimeout関数を組み込んだタイプ


hover()タイプのツールチップに、setTimeout関数を組み込んでみました。一定時間マウスを乗せなければ反応しません。必ずしもsetTimeout関数組み込みが必要と言う訳ではありませんが、有ったほうが良いようです。角丸陰影処理はCSS3対応の場合のみ有効です。

 

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


/// 以下のサンプルには、setTimeout時間、1000ミリ秒が設定されています。///


Example: ここをマウスでHOVERしてください。これは説明文です。closeクラスを設定しますと「閉じる」ボタンが追加され、クリックで非表示にもどります(EM1)。
リンク先 : LINK1
ツールチップで説明文などが表示されます。簡単なTOOLTIPです。装飾はCSS3ですからCSS3の機能しないブラウザ(IE78)では角丸陰影にはなりません。表示させたい場所にクラスを設定、text属性に説明文を記述しています。
クラス設定の要素が近接している場合でもそれぞれ固有の「ツールチップのBOX」を作るため多少マウス操作が乱暴でも表示します。尚、表示されない場合はもう一度HOVERすれば表示します。

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


 

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


 

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

closeクラスを設定、クローズボタンを追加処理します。ボタンクリックで閉じる。TEXTが無い場合(TEXT優先)は、クラス設定要素の次ぎのEM要素(内部のEM要素指定可能)を読み出しますので。リンクなども書き込めます。

これは説明文です。closeクラスを設定しますと「閉じる」ボタンが追加され、クリックで非表示にもどります(EM2)。
リンク先 : LINK2

 

● 下は、親子のDIV要素にどちらも「tool-tip」クラスを設定しました。hover()の方が見やすい。


注意、text属性は当方が勝手に作った「属性名」です。▼下のボタンで少し変更を見ることが出来ます。


MODEの切替 : scale fade show :初期値 fade&move

BOX幅の切替 : 200 250 300 400 :初期値 300

背景色の切替 :                         :初期値 #FFFFFF

表示位置の切替 : -10 -30 :初期値 -10

移動Y方向量の切替 : 20 50 0 :初期値 20 (fadeのみ)

初期位置の切替 : bottom center top :初期値 0 (scaleのみ、拡大方向XY方向のみ)

拡大方向の切替 : XY方向 X方向 Y方向 :初期値 0 (scaleのみ、1 2 初期位置強制変更)

遅延時間の切替 : 200 750 1000 :初期値 1000

BOX幅はJSで、背景色などはCSSで設定可能です。高さは文字数により修正されます。



親子のDIV要素に「tool-tip」クラスを設定した場合の、mouseover()タイプでの表示は下記のページで確認できます。

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


HTML JS CSS など


HTML

文章の中に span を入れて設定した例

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


通常の設定、spanに文章
<p>文章.....<span class="tool-tip" text="説明文">説明文を表示するエリア。</span>文章.....</p>

text属性は当方が勝手に作った「属性名」ですが jquery では認識して読み出します。


クローズボタンを追加する。「close」クラスを書き込むだけです。


divに画像、クローズボタンを追加
<div class="tool-tip close" text="説明文"><img src="画像URL" width="260" height="100" /></div>

クローズボタンを追加して、「em」要素を表示する場合は下の「簡単な解説」に説明があります。(html書き込み可能)


JS

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

tool-tip9.js mouseover形式のJSは、前ページ、mouseover tooltip 4 にあります。


//tool-tip9.js
//setTimeout
//hover-ACTION

(function($){

	$(function () {

		//表示位置の修正値

		//追加モード、scale拡大、fadeフェード移動、show単純表示
		var mode="fade";// fade scale show
		var box_W=300;//チップ横幅初期値/JSでCSS修正
		var move_v=20;//フェード移動Y方向移動値、下方にの移動量
		//BOXと要素との位置
		var posY_v=-10;//上方ならマイナス値をいれる
		var space=10;//左右のX余白
		//scale拡大の初期位置/0=bottom 1=center 2=top XY方向拡大のみ有効
		var start_pos=0;//初期0
		//scale拡大の方向 0=XY方向 1=X方向 2=Y方向
		scale_type=0;
		var speed=400;//アニメ時間 400-600
		//遅延タイマー 200-2000
		var delay_time=1000;//200 750 1000
		//------------------------------------------

		var box_H=60;//暫定の高さ/自動修正
		var top_v=-90;//Y初期位置値h60の場合/自動修正

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

		//closeクラスがあるか
		var hascrass=false;
		var timerID=null;

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

		//ループ
		$('.tool-tip').each(function (i) {

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

				//closeクラスの有無
				hascrass=false;
				if ($(this).hasClass('close')) {hascrass=true;}
				//オブジェクト
				obj=$(this);
				//受け渡し値 offset pageX
				var event=e;

				//タイマーセット
				timerID=setTimeout(function(){

					//viewtips関数、tip表示
					viewtips(i,event,obj);

				},delay_time);

			},

			//hover-out
			function (e) {

				//タイマー削除
				clearTimeout(timerID);
				//hidetips関数、tip削除
				hidetips(i);

			});

		});

		//showtip
		function viewtips(no,event,obj) {

			//受け渡し値 offset pageX
			var offset=obj.offset();
			var top_p=offset.top;
			var left_p=event.pageX;

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

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

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

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

			//title-textがない場合emを取得する/title-text優先表示
			if (!title_text && hascrass) {
				//var html_text=obj.find('em').html();
				var html_text=obj.next('em').html();
				tipitem[no].find('.tip-text').html(html_text);
			}

			//高さ取得のためtext-box幅決定、20px小さい
			tipitem[no].find('.tip-text').css({'width':box_W-20});
			//tipbox非表示だと高さ取れないので注意
			//tip-boxの高さを計算する/15+5=20
			box_H=tipitem[no].find('.tip-text').height()+20;

			//tip-boxの高さを決める/横幅は規定値
			tipitem[no].css({'width':box_W,'height':box_H});

			//anime移動終点位置計算
			var top=top_p+posY_v-box_H;
			var left=left_p-box_W/2;//中央補正標準
			//Y方向受け渡し保存値に代入、フェード初期位置
			move_st[no]=top-move_v;

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

			//closeクラスのある場合、close-btnを追加
			if (hascrass) {
				//close-btnを作るappend
				//テキストボタン
				//tipitem[no].append('<div class="close-btn" title="閉じる">×</div>');
				//画像ボタン
				tipitem[no].append('<div class="close-btn" title="閉じる"></div>');
				tipitem[no].find('.close-btn').click(function(){
					//tipboxを削除
					tipitem[no].remove();
				});
			}

			//scale初期位置修正中央補正
			if (mode == 'scale') {
				//X位置中央補正
				var left_m=left+box_W/2;
				//Y位置
				var top_start=top_p;//
				if (start_pos == 1) {top_start=top+box_H/2;}
				if (start_pos == 2) {top_start=top-posY_v;}
			}
			//scale拡大方向補正/1 2 見栄えを良くするためXY位置強制変更
			var width_v=0;
			var height_v=0;
			if (scale_type == 1) {height_v=box_H;top_start=top;}
			if (scale_type == 2) {width_v=box_W;top_start=top+box_H/2;left_m=left;}

			//anime実行
			if (mode == 'fade') {
				//display:blockのこと、初期位置決定
				tipitem[no].css({'opacity':0,'top':top-move_v,'left':left,'width':box_W,'height':box_H});
				tipitem[no].animate({'opacity':1,'top':top},speed,function(){
					//
				});

			} else if (mode == 'scale') {
				//内部divブロック非表示
				tipitem[no].find('div').css({'display':'none'});
				//補正値で初期位置決定
				tipitem[no].css({'top':top_start,'left':left_m,'width':width_v,'height':height_v});
				tipitem[no].animate({'top':top,'left':left,'width':box_W,'height':box_H},speed,function(){
					//内部divブロック表示
					tipitem[no].find('div').css({'display':'block'});
				});

			} else {
				//そのまま表示
				tipitem[no].css({'top':top,'left':left,'width':box_W,'height':box_H});

			}

		}

		//remove-tip
		function hidetips(no) {

			//closeクラスのある場合なにもせずもどる
			if (hascrass) {return}

			//tip-boxがあれば実行、作ってない場合もある
			if (tipitem[no]) {

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

				} else {
					//tipboxを削除
					tipitem[no].remove();
				}

			}

		}

	});

})(jQuery);

JS中の、注釈文を削除すれば、動作が少々速くなります。


CSS

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


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

/* Example */
.tool-tip {
cursor:default;/*pointer*/
}
span.tool-tip {
width:auto;
height:20px;
padding:0;
background-color:#DDDDDD;
}

/* tooltip */
.tip-box {
display:block;
position:absolute;
left:0;top:0;
width:300px;
height:60px;
margin:0;
padding:0;
border:1px #333333 solid;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow: 0 0 6px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
background-color:#FFFFFF;
}
.tip-box em {
display:none;
}
.tip-box .arrow-box {
display:block;
position:absolute;
left:0;bottom:2px;
width:100%;
height:8px;
text-align:center;
line-height:8px;
font-size:11px;
/font-size:75%;/*IE67*/
color:#FF0000;
}
.tip-box .close-btn {
display:block;
position:absolute;
right:3px;top:3px;
width:9px;
height:9px;
margin:0;
padding:0;
background:url('/main/images/tip_close.gif') no-repeat;
cursor:pointer;/*default*/
}
.tip-box .tip-text {
position:absolute;
left:8px;top:5px;
width:280px;
height:auto;
margin:0;
text-align:left;
font-style:normal;
font-size:11px;
/font-size:75%;/*IE67*/
color:#888888;
overflow:hidden;
}

必要なのは tooltip の部分だけです。em 要素使用の場合は display:none であること。

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


簡単な解説


説明図


基本的には、「tooltip 6」にsetTimeout関数処理を追加した形になります。

1. 基本的な設定はJS上部をみてください。幅及び表示タイプなどを選定できます。(fadeフェード移動選定で移動量を0にすれば、フェードだけになります)
2. 色の変更のみ、CSSで変更ください。tooltipの大きさはJSで変更されます。サンプルでは画像ボタン使用。
3. 原則マウスX位置を中心としてツールチップが表示されますが、左右で隠れることの無い様に修正されます。Y位置はクラス設定された要素の上部を基点としてツールチップ下辺までの隙間です。
4. JSは見やすくするため、ツールチップの「表示処理」「削除処理」箇所を別関数に分離しています。他ページのものと一部違いがあります。(each(function (i)での i カウントの設定箇所など、、)
5. X方向、Y方向の、拡大方向の切替を加えました。アニメの見栄えの視点から、初期位置の設定は機能しないようにしています。(XY方向、拡大は機能します)


closeクラス設定で、「em」要素で aリンクなどを組み込みたい場合 1

text属性はテキストのみ記載できますが、htmlは記載できませんので、「em要素」を作り、htmlを書き込みます。

現在のでは「close」クラス設定がなされた要素の、次ぎの「em要素」のhtmlを取り込みます。text属性は書き込まないこと。(text属性に文章があればtextを優先して読み込みます)

次の例は、直後にある「em要素」を読み込み表示します。「em要素」内の html の書き方は自由。


通常の設定、spanに文章、emを書く

<p>文章.....<span class="tool-tip" close" text="">説明文を表示するエリア。</span><em>説明文..............<br /><a href="http://xxxx.com/">LINK</a></em>文章.....</p>

divに画像、クローズボタンを追加、emを書く

<div class="tool-tip close" text=""><img src="画像URL" width="260" height="100" /></div>
<em>説明文..............<br /><a href="http://xxxx.com/">LINK</a></em>

-------------------------------------

text=""は下のように書いても良い
<span class="tool-tip close">

こちらが標準的なものです。text="" は、そのものが無いundefined状態でも可。
文章など表示しない場合は、「em」の書き方など調べてください。適正であれば表示します。


closeクラス設定で、「em」要素で aリンクなどを組み込みたい場合 2

場合によっては「em要素」をcloseクラス設定要素の、内部に書き込みたい場合もあるかも知れません。


divに画像、クローズボタンを追加、emを書く例で、説明すれば構造は以下のよう

<div class="tool-tip close" text="">
<img src="画像URL" width="260" height="100" />
<em>説明文..............<br /><a href="http://xxxx.com/">LINK</a></em>
</div>

JSを上記形式で「em」要素を書いた時に認識して処理できるように、変更します。


標準では、next('em')...の方を処理するようになっています

//title-textがない場合emを取得する/title-text優先表示
if (!title_text && hascrass) {
	//var html_text=$(this).find('em').html();
	var html_text=$(this).next('em').html();
	tipitem[i].find('.tip-text').html(html_text);
}

を、//部分を以下に変更して、find('em')...の方を有効にする

if (!title_text && hascrass) {
	var html_text=$(this).find('em').html();
	//var html_text=$(this).next('em').html();
	tipitem[i].find('.tip-text').html(html_text);
}

これで要素内部のemを取り込みます

文字でクローズボタンを作る

サンプルでは、背景画像を使用しています。完全にCSSでテキストを組み合わせてのボタンも可能です。
テキスト文字を入れるだけです。×、あるいは X、C、閉、など。最悪文字無でも認識は出来る。


文字クローズボタン &#215 &times;、背景などはCSSで変更
JSを変更
if (hascrass) {
	//close-btnを作るappend
	tipitem[i].append('<div class="close-btn" title="閉じる">&#215</div>');
}

CSSを変更
.tip-box .close-btn {
display:block;
position:absolute;
right:3px;top:3px;
width:9px;
height:9px;
margin:0;
padding:0;
text-align:center;
line-height:9px;
font-size:12px;
color:#FF0000;
background-color:#EEEEEE;
cursor:pointer;/*default*/
}

ブラウザ、IE6 7 8 9、Safari Firefox Chrome Opera、一応対応です。(IE10は未確認、大丈夫と思う)
CSS3角丸陰影対応は、IE9、Safari Firefox Chrome Opera、CSS3ブラウザを推奨します。(IE10は未確認)


mouseover()形式のJS


書式を変更するだけで、簡単にmouseover()形式になります(mouseover書式の部分だけ違い、あと全く同じ)。CSSは同じです。


//ループ
$('.tool-tip').each(function (i) {

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

		//closeクラスの有無
		hascrass=false;
		if ($(this).hasClass('close')) {hascrass=true;}
		//オブジェクト
		obj=$(this);
		//受け渡し値 offset pageX
		var event=e;

		//タイマーセット
		timerID=setTimeout(function(){

			//viewtips関数、tip表示
			viewtips(i,event,obj);

		},delay_time);

	});

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

		//タイマー削除
		clearTimeout(timerID);
		//hidetips関数、tip削除
		hidetips(i);

	});

});


mouseover()タイプのJSは前のページにサンプルと共にあります。

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


使用画像など

原則、画像は使用者が制作します。

サンプル、クローズボタン画像、tip_close.gif - tip_close4.gif (9x9)


tip_close.gif tip_close2.gif tip_close3.gif tip_close4.gif

以上です。

 


[ この記事のURL ]


タグ:jquery , memo , series , 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]