POPSブログ

jQuery tooltip/1

171

  Category:  jquery2012/11/27 pops 

簡単単純なツールチップ(tooltip)です。簡単に作れますので自作した方が使い勝手が良いかも知れません。デザインも自由になります。

 

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

大概はhoverタイプである。補足説明などを表示させるためのものであるが、ある要素にマウスがのると表示し、離れれば消滅するものが多い。中には「閉じる」ボタンを押さなければ消えないものもある。


目的により多少は違いはあるが、手っ取り早く作るには下記の形式のものが多いし簡単である。但し定形の大きさとして、デザインもシンプルである。他のコピーではないかと言えば其のとおりですネ。


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


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


Example1: ここをマウスでHOVERしてください。ツールチップで説明文などが表示されます。簡単なTOOLTIPです。装飾などはCSS3ですれば簡単ですが、CSS3に対応していないブラウザでは当然装飾は成りません。表示させたい場所にクラスを設定、title属性に説明文を記述しています。
title属性は標準では「噴出しチップ」を表示します。文章の保存先でtitle属性を利用しているので、JSでそのため「噴出しチップ」に表示されない様に処理を施しています。title属性を使用するのは判り易いからかナ。

title属性がない場合は、undefined を返します。要素のタイトルを消去処理していますので、2回目以降は""が書き込まれています。


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




HTML JS CSS など


HTML

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

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


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

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

JS

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

Example1 tool-tip1.js


//tool-tip1.js

//Example1
//マウス位置、タイトル属性使用
(function($){

	$(function () {

		//表示位置の修正値
		var left_v=-150;//X修正値 tip-box1の幅を考慮
		var top_v=-60;//Y修正値
		var title_v;//タイトルの保存

		$('.tool-tip1').each(function () {

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

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

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

				},
				function (e) {

					//tip-boxを削除
  					$('#tip-box1').remove();
					//要素のタイトルを復活
					$(this).attr('title',title_v);
				}

			);

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

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

			});

		});

	});

})(jQuery);

title属性を利用したため、titleがツールチップ以外で表示されないように一旦削除して、あとで元に戻す操作が行われている。title属性そのものが無ければ undefined を返す。


title属性がない、中身の説明がない、などの理由でツールチップを表示させたくない場合は、次ぎのように修正すれば良い。「#tip-box1」が作れない時でもjqueryはエラーにはならず、影響はない。


//タイトル取得が有効なら
if (title_text) {
	//tip-boxを作る
	$('body').append('<div id="tip-box1">' + title_text + '</div>');
  	$('#tip-box1').css({'top':top,'left':left,'display':'block'});
}

title_text が正常に取得できれば true になる、
undefined "" null の場合は false であるから判定が可能である

CSS


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

/* Example1 */
.tool-tip1 {
cursor:default;/*pointer*/
}
span.tool-tip1 {
width:auto;
height:20px;
background-color:#DDDDDD;
}
#tip-box1 {
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-tip1」クラスに「背景色」が設定されています。文章以外の場所に「tool-tip1」クラスを指定するときなどは、適せんにCSSを書き換えてください。
「IE6.7」で font-size の指定が効かないので、ハックで 75% 指定にしています。使用ページの状況にあわせてください。
CSS3が有効なブラウザでは「角丸陰影」がなるように設定されています。変更自由。


簡単な解説


1. 要素にHOVERした時、新たにツールチップのBOXを作るタイプです。作る時間は「瞬間」ですから表示に時間はかかりません。
2. 表示させたい要素に、「tool-tip1」 クラスを与え、「タイトル属性」に説明文を記述します(クラス名変更可能)。沢山の文字は記入できません、簡素に。
(「タイトル属性」が使用されるのは、ほぼ全てのタグが属性として持っているからでしょう、id class styleは文字保管用としては使用する訳にはいきませんし)
3. ツールチップの大きさはCSSで変更可能です。この場合JS先頭の表示位置の修正値を適正に変更ください。デザインなどもCSSで自由です。
4. JSでマウス移動処理、$(this).mousemove(function(e){}...... は必要で無い方は、削除可能です。(有れば、ツールチップBOXが隠れたときなどの面倒な処理が簡素化できるので以外と便利だ)
5. JSは、どこにでもある一般的な記述です。JS改造などは自由ですが、アニメにする場合、クラス要素が接近しているとアニメ処理終了前に次ぎ要素に進み誤作動がでます。(誤作動しないようにアニメ処理が必要)
6. 説明文は「title属性」を使用していますので振り替え処理のようなことをやっています。「titleとして表示」するのを防止。
7. ツールチップBOXは「body要素」の最後に挿入されますので、最上位に表示なりますが、ページ構成などで問題があれば適正な「z-index」を与えます。
8. 「title属性」が undefined の場合の処理はしていません。


ここで重要なのは、新たにBOXを作り body 要素に引っ付ける、「title属性」に隠しておいた文字データを代入して指定の位置に表示する。必要であれば移動する方法である。


JSでのCCS設定の文法について。

CSS設定の場合要素の設定項目が1つの場合「文字型」の文法を使用できるのですが、「IE8」で認識しない場合があります(CSSの基準に準拠すれば、こちらが正しいらしい)。其のため「連想配列形式」で統一していますので認識ください。
これは「IE8」が出た時点であるが、現在はどうなっているかは不明である。但し「連想配列形式」で記述した以後、現在まで「認識しない」状態はおきていない。


「文字型」の文法は使用していません
$('#xxxxxxxx').css('top','50px');

全て「連想配列形式」で統一しています
$('#xxxxxxxx').css({'top':50});

以上です。

 


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