POPSブログ

jQuery tooltip/8

182

  Category:  jquery2012/12/13 pops 

一般的に紹介されている、簡単単純なツールチップ(tooltip)です。簡単に作れますので自作した方が使い勝手が良いかも知れません。デザインも自由になります。これに遅延するように、setTimeoutを組み込んでみました。

 

簡単なtooltip、新たにツールチップのBOXを作るタイプ

記事「tooltip 1」のものを改造しただけである。大概はhoverタイプで「ある要素にマウスが一定時間のる」とツールチップを表示し、離れれば消滅します。setTimeoutを組み込んだ方が繁雑に表示しないので見た目すっきりします。
一般的な使用方法ではありませんが、親子の要素にどちらも「tool-tip」クラスを設定した場合(Example B)でも使用できるように考慮してみました。
短いスクリプトで簡単にできますが、品質は今一です。setTimeout時間が長すぎないようにした方がベターかも知れない。


新たにツールチップのBOXを作るタイプでマウスの位置を基準として表示する


Example / マウスの位置で表示する方法


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


Example A: ここをマウスでHOVERしてください。ツールチップで説明文などが表示されます。簡単なTOOLTIPです。装飾はCSS3ですからCSS3の機能しないブラウザ(IE78)では角丸陰影にはなりません。表示させたい場所にクラスを設定、text属性に説明文を記述しています。
其の都度、同じIDの「ツールチップのBOX」を作ります。尚、表示されない場合はもう一度HOVERすれば表示します。

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


 

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


 

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

 


Example B: 下は、親子のDIV要素にどちらも「tool-tip」クラスを設定しました。余り使用しない形態です。hover()の方が見やすい。現在は、このような状態でも表示可能という段階の調整です。上の例の様に複合的で無い場合は問題ありません。



現在のJSでは、title属性では戻すときに親子の識別しなく、どちらにも親のタイトルを戻してしまうので使えない。


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


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


HTML JS CSS など


HTML

文章の中に span を入れて設定した例と、divに画像を入れた例。

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


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

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

JS

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

tool-tip13.js


//tooltips13.js
//マウス位置setTimeout
//text

(function($){

	$(function () {

		//表示位置の修正値など

		var left_v=-150;//X修正値 tip-boxの幅を考慮
		var top_v=-60;//Y修正値
		//遅延タイマー 200-1000
		var delay_time=500;//200 500 750 1000

		//---------------------------------
		var title_v;//タイトルの保存
		var timerID=null;

		$('.tool-tip').each(function (i) {

			//hover-ACTION
			$(this).hover(

				function (e) {

					var obj=$(this);
					var event=e;

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

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

						//hover()の時、残っているtipがあれば削除
						//mouseoverの時は設定しないこと、うまく行かない
						if ($('#tip-box')) {$('#tip-box').remove();}

						//マウス位置と補正
						var left=e.pageX+left_v;
						var top=e.pageY+top_v;
						//tip-boxを作る
						$('body').append('<div id="tip-box">' + title_text + '</div>');
  						$('#tip-box').css({'top':top,'left':left,'display':'block'});

					},delay_time);

				},

				//hover-out
				function () {

					//タイマー削除
					clearTimeout(timerID);

					//tip-boxを削除
  					$('#tip-box').remove();

				}

			);

			//マウス移動処理
			$(this).mousemove(function (e) {

   				//マウス位置取得修正
				var left=e.pageX+left_v;
				var top=e.pageY+top_v;
				$('#tip-box').css({'top':top,'left':left});

			});

		});

	});

})(jQuery);

title属性を利用するとExample Bで旨く戻らないので、独自のtext属性を使用した。これでも問題なく読み取れる。


CSS

tool-tip13.css


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

/* Example */
.tool-tip {
cursor:default;/*pointer*/
}
span.tool-tip {
width:auto;
height:20px;
background-color:#DDDDDD;
}
#tip-box {
display:none;
position:absolute;
top:0;left:0;
width:300px;
height:40px;
margin:0;
padding:2px;
text-align:left;
font-style:normal;
font-size:11px;
/font-size:75%;/*IE67*/
color:#333333;
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;
}

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


簡単な解説


1. 要素にHOVERした時、新たにツールチップのBOXを作るタイプです。作る時間は「瞬間」ですから表示に時間はかかりません。
2. title属性の使用を、text属性に変更しました。正式な属性名以外の「好きな名前」で属性として書き込んでおくことができます。jqueryで取り込み可能です。
3. 上記サンプルの例、Example B のごとく、 親子のDIV要素にどちらも「tool-tip」クラスを設定しても使用できるようにしました。余りこのような使用は無いとおもいます。
4. ツールチップの大きさは固定の寸法です。色などはCSSで設定します。表示する文字数はツールチップの大きさ以内に収まる文字数です。
5. ツールチップの位置及び、遅延時間はJS先頭で修正できます。
6. 極短文の注釈を書き込む用途です。長い文章には向きません。(長文は前ページJS参照)


●マウス移動処理、mousemove()

マウス移動処理、mousemove()が設定されていますので、マウスの動きでツールチップが移動します。
この機能が必要でないならば削除ください。またY方向に動かしたくない場合は、Y方向処理部分をコメントにしてください。


Y方向に動かしたくない場合は、mousemove()関数内

//var top=e.pageY+top_v;


●title属性を利用したJSの場合

何らかの都合があり、title属性を利用したい場合は、下記のようにtitle属性を読みだす形に変更します。

tool-tip13b.js title属性読み込み形式


//tooltips13b.js
//マウス位置setTimeout
//title

(function($){

	$(function () {

		//表示位置の修正値など

		var left_v=-150;//X修正値 tip-boxの幅を考慮
		var top_v=-60;//Y修正値
		//遅延タイマー 200-1000
		var delay_time=500;//200 500 750 1000

		//---------------------------------
		var title_v;//タイトルの保存
		var timerID=null;

		$('.tool-tip').each(function (i) {

			//hover-ACTION
			$(this).hover(

				function (e) {

					var obj=$(this);
					var event=e;

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

					//要素のタイトルを消去
					$(this).attr('title',"");

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

						//hover()の時、残っているtipがあれば削除
						//mouseoverの時は設定しないこと、うまく行かない
						if ($('#tip-box')) {$('#tip-box').remove();}

						//マウス位置と補正
						var left=e.pageX+left_v;
						var top=e.pageY+top_v;
						//tip-boxを作る
						$('body').append('<div id="tip-box">' + title_text + '</div>');
  						$('#tip-box').css({'top':top,'left':left,'display':'block'});

					},delay_time);

				},

				//hover-out
				function () {

					//タイマー削除
					clearTimeout(timerID);

					//tip-boxを削除
  					$('#tip-box').remove();

					//要素のタイトルを復活
					$(this).attr('title',title_v);

				}

			);

			//マウス移動処理
			$(this).mousemove(function (e) {

   				//マウス位置取得修正
				var left=e.pageX+left_v;
				var top=e.pageY+top_v;
				$('#tip-box').css({'top':top,'left':left});

			});

		});

	});

})(jQuery);

Example B:のような場合は、「親要素」に「tool-tip」クラスを設定しないで、ブラウザ機能でタイトルを表示する。「子要素」に「tool-tip」クラスを設定するようにして使用する。其の他のサンプルなどは何ら問題はない。


この記事の原型となったJSのページ。(title属性使用、遅延タイマーsetTimeoutなし)

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


使いやすく、考慮したツールチップのページ。このサンプルより品質は良い。(大きさ可変、遅延タイマーsetTimeout有り)

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


以上です。

 


[ この記事の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]