POPSブログ

jQuery tooltip/2

172

  Category:  jquery2012/11/30 pops 

簡単単純なツールチップ(tooltip)、背景画像を使用した「フェードタイプ」です。簡単に作れますので自作した方が使い勝手が良いかも知れません。デザインも自由になります。

 

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

PNG32陰影付き透過画像を使用したフェードタイプの、ツールチップです。CSS3と違いブラウザに関係なく同じデザインになります。但しこのサンプルは、IE7でバグがでます。バグを修正したタイプもあります。


目的により多少は違いはあるが、手っ取り早く作るには下記の形式のものが簡単である。但し定形の大きさとして、デザインもシンプルである。IEでPNG32陰影透過画像を使用「AlphaImageLoaderフィルター」処理をしています。


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


Example / マウス位置と、要素のoffsetでの位置調整方法


Example2: ここをマウスでHOVERしてください。ツールチップで説明文などが表示されます。簡単なTOOLTIPです。装飾などはCSS3ですれば簡単ですが、CSS3に対応していないブラウザでは当然装飾は成りません。表示させたい場所にクラスを設定、text属性に説明文を記述しています。
クラス設定の要素が近接している場合は「ゆっくり移動ください」。操作が早いと乱れる場合があります。また表示されない場合はもう一度HOVERすれば表示します。

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


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




HTML JS CSS など


HTML

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

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


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

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

JS

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

Example2 tool-tip2.js


//tool-tip2.js
//Example2

//マウス位置、要素のoffset位置で調整、text属性使用、マウス移動処理削除
(function($){

	$(function () {

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

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

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

					//tip-boxが残っていれば削除/is処理でも良い、一応判定する
					if ($('#tip-box2')) {$('#tip-box2').remove();}

					//タイトルの取得、無ければ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;

					//マウス位置と補正、X方向はマウス位置を使用
					var left=e.pageX+left_v;
					//var top=e.pageY+top_v;

					//tip-boxを作る
					$('body').append('<div id="tip-box2"><div>' + title_text + '</div></div>');

					//AlphaImageLoaderフィルターのため背景削除
					if (!jQuery.support.opacity) {$('#tip-box2').css({'background-image':'none'});}

					//位置決定、fadeInの前処理で非表示にする、アニメ時間は短いほうが良い
					$('#tip-box2').css({'top':top,'left':left,'display':'none'});

					$('#tip-box2').fadeIn(400);

				},
				function (e) {
					//時間を短く、アニメ停止ジャンプ
					$('#tip-box2').stop(false,true).fadeOut(200,function(){

						//アニメ終了、tip-boxを削除
						$('#tip-box2').remove();
					});

				}

			);

		});

	});

})(jQuery);

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


CSS


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

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

#tip-box2 {
display:block;
position:absolute;
left:0;top:0;
width:300px;
height:60px;
margin:0;
padding:0;
background:url('/main/images/tip_panel_bk.png') no-repeat;
background-color:transparent;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/tip_panel_bk.png',sizingMethod='scale');
}

#tip-box2 div {
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と合わせてください。(判らない場合は下記の「PNG32陰影付き、、」説明参照)

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


簡単な解説


1. 要素にHOVERした時、新たにツールチップのBOXを作るタイプです。作る時間は「瞬間」ですから表示に時間はかかりません。
2. 表示させたい要素に、「tool-tip2」 クラスを与え、「text属性」に説明文を記述します(クラス名変更可能)。沢山の文字は記入できません、簡素に。
3. ツールチップの大きさは300x60の固定の大きさです。それ以外は制作ください。PNG32陰影付きの透過画像をフェードする場合は、IEではフィルター処理が必要です。
4. 画像を使用せず、CSS3で処理する場合は、PNG32画像の処理部分を削除すれば可能と思う。(前ページ参照、画像を使うと問題が出易いから使用しないほうが利口)
5. JSは、どこにでもある一般的な記述です。JS改造などは自由ですが、アニメにする場合、クラス要素が接近しているとアニメ処理終了前に次ぎ要素に進み誤作動がでます。(誤作動しないようにアニメ処理が必要)
6. 説明文は勝手に作った「text属性」を使用していますので「title属性」使用の場合の様な処理は無用です。
7. ツールチップBOXは「body要素」の最後に挿入されますので、最上位に表示なりますが、ページ構成などで問題があれば適正な「z-index」を与えます。
8. 「text属性」が undefined の場合の処理はしていません。


text属性について


「text属性」なるものは属性として存在しません。勝手に作った属性です。「title属性」を利用すれば処理がふえます。
jqueryでは、「適当な名前の属性」であっても「読み出し」「書き込み」が可能のようです。(バージョン違いでの処理状況は不明、1.4系から使用しているが問題はでていない。)
つまり次ぎのように書き込みます。


spanでの例
<span class="tool-tip2" text="説明文">説明文を表示するエリア。</span>

適当な名前で文章などの埋め込みが可能だ、制御にも利用できる

ahou="タコもイカも同類項"

私は、このようにして密かに笑います、不謹慎なサイトです

2012/11現在、ブラウザ、IE Safari Firefox Chrome Operaで問題なく「読み出し」「書き込み」が出来ます。
但し、正式に存在する属性以外の名前をつけることが条件です。


マウス位置と、要素のoffset取得での表示位置調整


マウス位置だけでの表示位置調整の場合は簡単だが、不満なところもあるので、対象要素のoffset取得での調整と組み合わせてみた。offsetだけではブラウザの幅を調べたりと調整が繁雑なので「ズル」をしてみた。
完全ではないが、一応は使用に耐えると思う。
Y方向はoffset値で、X方向はマウス位置の値で、ツールチップのBOXの表示位置を決定した。


PNG32陰影付き透過画像の使用について


IEで、PNG32陰影付き透過画像をでフェードする場合は「AlphaImageLoaderフィルター」処理をしないと「真っ黒」になります。「IE7」はバグのため、フェード時キレイになりません。
尚、フィルター処理の後、背景を削除しなければなりませんが、これはJSで行いました。



background:url('CSSからみた相対URL') center center no-repeat;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ページのhtmlからみたURL',sizingMethod='scale');

判らない場合は、ともに絶対URLで良い。

背景画像の、フィルター処理をすると画像が2枚重なった状態になるので、背景画像を削除する
background-image:none;

CSSで削除実行すれば、IE以外の背景画像も無くなるのでJSで処理する

//AlphaImageLoaderフィルターのため背景削除
if (!jQuery.support.opacity) {$('対象アイテム').css({'background-image':'none'})}

IEで、CSSでのopacity処理の出来ないものと、PNG32画像フィルター処理が必要なものは
一応、一緒なので判定に使った

IE7、PNG32陰影透過画像のフェード時のバグについて


説明図


ご注意、付属のPNG画像を「IE7」で使用した場合に少し見苦しい。透過されない黒い部分がフェード時表示され、フェード終了後はキレイにもどる(サンプルのような背景パネル黒)。「IE7」のバグによるものです。他のブラウザではキレイにフェード表示します。
厳密にいえばこのサンプルは「IE8以上」対象といえます。もう「IE6.7」に対処しなくとも良い方はこちらで結構です。

IE7を無視するならば、それで結構です。但し「白色のツールチップ」ではフェードもなりませんし壊れたままになります(黒と白では画像の作り方に違いあり)。IE7のみ「AlphaImageLoaderフィルター」処理しないで、opacityアニメ処理すれば「見苦しい」のですが表示できます。分離しての作業は面倒です。
バグを修正したものを、「次ぎのページ」に掲載します。構造を変えるだけの簡単な処理で直ります。


カスタムopacityアニメの例、フェードと移動など組み合わせることが出来る利点がある。


function (e) {

	途中略

	//アイテムを透明度0にする、display:blockのこと
	$('#tip-box2').css({'top':top,'left':left,'opacity':'0'});
	//カスタムopacityアニメ
	$('#tip-box2').animate({'opacity':'1'},400);
},
function (e) {
	//opacityアニメ
	$('#tip-box2').animate({'opacity':'0'},200,function(){
		//アニメ終了、tip-boxを削除
		$('#tip-box2').remove();
	});
}


説明文が無い場合スキップして表示させない


「text属性」がない、中身の説明がない、などの理由でツールチップを表示させたくない場合は、次ぎのように修正すれば良い。「#tip-box2」が無くともjqueryはエラーにはならず、「処理対象」がなければ実行しない様作られている。影響はない。


//タイトル取得が有効なら
if (title_text) {

	ツールチップを作る、アニメなど処理をする、中は略す

}

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

アニメーションの調整


フェードをした場合、クラスを与えた要素が離れていれば問題はないが、hoverアクションなため、近い位置にあると「終了処理完了前」に次ぎ要素にHOVERされ、アニメが壊れてしまいます。
フェード時間を短くすればよいが、ある程度はほしいので問題がおきないように少し調整しています。
勿論、「PNG32陰影付き透過画像」を使用してますので「負荷」が大きいのも原因の一つです。
ツールチップが完全に「フェードアウト」してから移動すればよいのですが、閲覧者は事情はわかりませんので、、、。


フェードアウト処理をスキップする。

このサンプルでは、「フェードイン」「フェードアウト」の例ですが「フェードアウト処理をスキップ」することも可能です。次のように変更します。


function (e) {
	//アニメ省略、直ぐ終了、tip-boxを削除
	$('#tip-box2').remove();
}

マウス移動でX位置修正。

必要なら次ぎのスクリプトを追加する、但しY方向は要素のoffset値で固定される。


$('.tool-tip2').each(function () {
	//hover-ACTION
	$(this).hover(
		function (e) {
		省略
		},
		function (e) {
		省略
		}
	);

	//マウス移動処理
	$(this).mousemove(function (e) {
   		//マウス位置取得修正/X方向だけ修正
		var left=e.pageX+left_v;
		//var top=e.pageY+top_v;
		$('#tip-box2').css({'top':top,'left':left});
	});
});


使用画像など

サンプル、PNG32画像 tip_panel_bk.png / tip_panel_wh.png (300x60)、
GIF画像 tip_back_bk.gif / tip_back_wh.gif (300x60)、tip_back_bk2.gif / tip_back_wh2.gif (300x60)、
GIFは「AlphaImageLoaderフィルター」処理不要です。

tip_panel_bk.png (サンプル使用) tip_panel_wh.png
tip_back_bk.gif tip_back_wh.gif
tip_back_bk2.gif tip_back_wh2.gif

次ぎのページは、上記サンプルの「IE7」のバグを修正したものです。

【「IE7」のバグを修正したJS】当方の記事: 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]