POPSブログ

jQuery tooltip/3

173

  Category:  jquery2012/11/30 pops 

前ページの、IE7のフェードでのバグを修正したツールチップJSです。背景画像収容のDIV要素をラップしただけです。

 

IE7のフェードでのバグを修正したツールチップJS

PNG32陰影付き透過画像を使用したフェードタイプの、ツールチップの「IE7でのバグ」は背景画像収容のDIV要素をラップしただけで直ります。(但し、今度はこれがIE8に少し影響を与えます、、、)


Example / 「IE7でのバグ」修正


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

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


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


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



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>

text属性は勝手に作った属性ですが、jqueryで認識し読み出し可能です。よってhtmlで使用されていない「適当な属性名」でも文章の保存ができる。何ら影響はありませんが、厳密にはhtml違反になりますから減点1です。


JS

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

Example tool-tip2b.js


//tool-tip2b.js
//IE7バグ修正

(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 id="tip-inner"><div id="tip-text">' + title_text + '</div></div></div>');

					//AlphaImageLoaderフィルターのため#tip-inner背景削除
					if (!jQuery.support.opacity) {$('#tip-inner').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);


ツールチップの構造をラップして変えた。たったそれだけの変更です。パネルは黒でも白でも、これでキレイにフェードする。IEにはこんな事で直るものも多い。バグがある事自体が問題ですが、色々な構造を作らねば判らんことです。
操作しやすい様に、ID #tip-inner #tip-text を増やしています。JSもほぼ同じです。

1. 以前は背景画像層と、フェードさせる階層は同じ(#tip-box2)。
2. 今回は、子の層(#tip-inner)に背景画像をいれて、親の層(#tip-box2)をフェードさせる。



<div id="tip-box2"><div id="tip-inner"><div id="tip-text"></div></div></div>

CSS

画像は白を使用しました。黒の場合は黒の画像を記載ください。画像URLは環境に合わせます。


/* tool-tip2b.css IE7バグ修正 日本語 */

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

#tip-box2 {
z-index:10;/* IE8対策 */
display:block;
position:absolute;
left:0;top:0;
width:300px;
height:60px;
}
#tip-box2 #tip-inner {
position:absolute;
left:0;top:0;
width:300px;
height:60px;
margin:0;
padding:0;
background:url('/main/images/tip_panel_wh.png') no-repeat;
background-color:transparent;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/main/images/tip_panel_wh.png',sizingMethod='scale');
}
#tip-box2 #tip-inner #tip-text{
height:50px;
margin:5px 5px 0 10px;
text-align:left;
font-style:normal;
font-size:11px;
/font-size:75%;/*IE67*/
color:#888888;
overflow:hidden;
}

IE8対策として、#tip-box2に z-index を設定しました。DIVの大きさ( width height )も必ず入れてください。


簡単な解説


説明図



バグの出る「背景画像層」を「ラップ」しただけです。何で直るのかも判らない「摩訶不思議現象」です。
4年ほど前、フェードアウトで、PNG32陰影透過画像ボタンが黒くなるのでラップしたような記憶があります。IEでは面倒なので余りフェードさせない様しています。何らかの手法を取れば大半は直るのですが、トテモ面倒であり非効率なので避ける傾向にあります。


IE7は解決しましたが、、、。IE8では、子の階層に画像などがあり、親の層をフェードすると「旨くフェードしない」性格があります。大概は z-index を与えるといいのですが、そのために、

1. フェードさせる階層(#tip-box2)に z-index を設定します。z-index:10 数値は何でも良いが (他のブラウザに影響が無い様な適当な値、出きればIE8にのみ設定できれば良い)。
2. フェードさせる階層(#tip-box2)の大きさを必ず設定する。
3. 条件が満たされないと、IE8でフェードしない。トテモ悪い性格の子です。(いい加減にしてほしいゼ)


動作、ブラウザ、IE6 7 8 9、 Safari Firefox Chrome Opera でOK (IE10は未確認、おそらく大丈夫か、)、 jquery-1.8.2まで確認済み。


そのほかの説明などは、ほぼ同じですので、前ページを参照ください。



使用画像など

サンプル、PNG32画像 tip_panel_bk.png / tip_panel_wh.png (300x60)、

tip_panel_bk.png tip_panel_wh.png (サンプル使用)

そのほかは前のページを参考ください。

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


以上です。

 


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