POPSブログ

jQuery tooltip/5

175

  Category:  jquery2012/12/02 pops 

前ページの、GIF背景画像を「移動フェードイン、アウト」ツールチップに「クローズボタン」付きの機能を追加したものです。状況に応じて、クラスで「ボタン無し」「ボタン有り」の設定が可能です。

 

新たに複数のツールチップBOXを作るタイプ(GIFフェードタイプ、「クローズボタン」付き)


前ページのJSに、クラスで「ボタン有り」の設定がなされた場合の追加スクリプトを記述しただけです。其の外、機能などは全く同じです。


新たにツールチップのBOXを作るタイプ「クローズボタン」付き 4


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


Example4: ここをマウスでHOVERしてください。ツールチップで説明文などが表示されます。簡単なTOOLTIPです。GIF画像使用なためにフェードしてもIEでバグが出難い。表示させたい場所にクラスを設定、text属性に説明文を記述しています。
クラス設定の要素が近接している場合でもそれぞれ固有の「ツールチップのBOX」を作るため多少マウス操作が乱暴でも表示します。尚、表示されない場合はもう一度HOVERすれば表示します。

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


 

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


 

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

closeクラスを設定、クローズボタンを追加処理します。ボタンクリックで閉じる。なるべく周囲にtool-tip3クラスがない場所に配置したほうが賢明です。


注意、text属性は当方が勝手に作った「属性名」です。狭い範囲に多く設定すると、ページは「お祭り騒ぎ」!。



HTML JS CSS など


HTML

文章の中に span を入れて設定した例と、あるいはボタン、divに画像を入れた例。

tool-tip3クラスを設定。text属性に説明文などを記載します。原則、書き込めるのはテキストであり、htmlは書き込めません。
tool-tip3クラスは前tool-tip3.jsで使用していますが、このtool-tip4.jsは追加設定のためにクラス名を同じにしました。


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

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


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

JS

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

Example4 tool-tip4.js


//tool-tip4.js
//Example4
//クローズボタンを追加

(function($){

	$(function () {

		//表示位置の修正値
		var box_W=300;//チップ横幅
		var space=10;//左右のX余白
		var top_v=-80;//Y初期位置
		var move_v=20;//Y方向移動値

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

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

		//ループ、カウントi付与
		$('.tool-tip3').each(function (i) {

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

					//タイトルの取得、無ければ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;
					//Y方向受け渡し保存値に代入
					move_st[i]=top;

					//マウス位置と補正、X方向はマウス位置を使用/左右補正
					var left=e.pageX-box_W/2;//中央補正標準
					//var top=e.pageY+top_v;//Y初期位置

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

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

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

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

					//closeクラスのある場合、
					//close-btnを追加アクション設定、アニメ省略
					if ($(this).hasClass('close')) {
						//close-btnを作るappend
						tipitem[i].append('<div class="close-btn" title="閉じる"></div>');

						tipitem[i].find('.close-btn').click(function(){
							//tipboxを削除
							tipitem[i].remove();
						});
					}

					//位置決定、アイテムを透明度0にする、display:blockのこと
					tipitem[i].css({'top':top,'left':left,'opacity':'0'});
					//カスタムopacityアニメY方向move_v移動
					tipitem[i].animate({'opacity':'1','top':top+move_v},400,function(){
						//事後処理
					});

				},
				function (e) {

					//closeクラスのある場合なにもせずもどる
					if ($(this).hasClass('close')) {return}

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

				}

			);

		});

	});

})(jQuery);

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


CSS

サンプルでのCSSの例です。現実には、ツールチップ(tip-box)のCSSがあればよい。ボタンを使用するので、close-btnクラスを追加しただけ


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

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

#link-sample {
display:block;
width:540px;
height:40px;
margin-left:50px;
_margin-left:25px;
}
#link-sample ul {
display:inline;
width:auto;
height:40px;
}
#link-sample li {
display:block;
list-style:none;
width:120px;
height:38px;
margin-left:50px;
_margin-left:25px;
background:url('/main/images/demo_btn.gif') no-repeat;
float:left;
}

.tip-box {
display:block;
position:absolute;
left:0;top:0;
width:300px;
height:60px;
margin:0;
padding:0;
background:url('/main/images/tip_back_bk2.gif') no-repeat;
background-color:transparent;
}
.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 {
height:50px;
margin:5px 10px 0 10px;
text-align:left;
font-style:normal;
font-size:11px;
/font-size:75%;/*IE67*/
color:#FFFFFF;
overflow:hidden;
}

背景画像URLは使用者のURLと合わせてください。

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


簡単な解説


1. 基本的なことは、前ページを参照ください。
2. クローズボタンを設定した要素の「tool-tip3」クラスの後に「close」クラスを記入するだけです。
3. 「close」クラスを追加しましたので、説明文のエリアが少し狭くなります。
4. 長い文章の要素にはクローズボタンを設定しない方が賢明です。(マウス移動で直ぐOVERしてしまう)、またツールチップを多用するとページが「お祭り騒ぎ」に成りかねませんので、ご注意を!。


JSの追加部分抜粋

JSで、「close」クラスの部分を追加しました。現在、「クローズボタンclick」アクションはアニメせず直ぐ削除しています、もし、アニメにする場合、hover-outアクションのアニメ部分をそのまま書けば機能します。


closeクラスがあるか判定して処理を追加、2箇所

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

	中略

	function (e) {

	中略

	//closeクラスのある場合、
	//close-btnを追加アクション設定、アニメ省略
	if ($(this).hasClass('close')) {
		//close-btnを作るappend
		tipitem[i].append('<div class="close-btn" title="閉じる"></div>');
		tipitem[i].find('.close-btn').click(function(){
			//tipboxを削除
			tipitem[i].remove();
		});
	}

	中略

	},
	function (e) {
		//closeクラスのある場合なにもせずもどる
		if ($(this).hasClass('close')) {return}

		中略
	}
}


ブラウザ、IE6 7 8 9、Safari Firefox Chrome Opera、対応。(IE10は確認、大丈夫と思う)



使用画像など

原則、表示する文字の長さなどを考慮して、画像は使用者が制作します。

サンプル、GIF画像 tip_back_bk2.gif / tip_back_wh2.gif (300x60)

クローズボタン画像、tip_close.gif / tip_close2.gif (9x9)


tip_back_bk2.gif(サンプル使用) tip_back_wh2.gif
tip_close.gif tip_close2.gif

前のページは、クローズボタンのない、このページのJSの原型です。

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


以上です。

 


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