POPSブログ

jQuery mouseover tooltip/1

177

  Category:  jquery2012/12/08 pops 

前ページまでの tooltip は hover() を使用しましたが、これは、mouseover()、mouseout() を使用しました。チップ横幅をJSで変更できるようにして、高さを自動で決定しますので、文章の長さを気にする必要はありません。

 

mouseover()を使用してツールチップを表示する


hover()は hoverイベントが持続するだけであってこのツールチップの構造では mouseover()、mouseout() を使用しても変わりはありません。「ただ記事数を増やしているだけだ!」と言われれば、其の通りです。
仮にhover()にしたいなら、hover()の書式に該当部分を変更すれば、同じ動作をします。


mouseover()を使用、新たにツールチップのBOXを作るタイプ 1


そこで、mouseover()形式でアニメの違うサンプルを作ってみました。アニメが少し違うだけで、やってる事はhover()形式と同じです。

 

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


Example1: ここをマウスでHOVERしてください。これは説明文です。hover()ではなく、mouseover()を使用して制作したものです。(EM1)。
リンク先 : LINK1
ツールチップで説明文などが表示されます。簡単なTOOLTIPです。装飾はCSS3ですからCSS3の機能しないブラウザ(IE78)では角丸陰影にはなりません。表示させたい場所にクラスを設定、text属性に説明文を記述しています。
クラス設定の要素が近接している場合でもそれぞれ固有の「ツールチップのBOX」を作るため多少マウス操作が乱暴でも表示します。尚、表示されない場合はもう一度HOVERすれば表示します。

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

 

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


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



 

● 下は、親子のDIV要素にどちらも「tool-tip」クラスを設定しました。(中の子の層のツールチップを表示する時、hover()、mouseover()、とも、表示状態、振る舞いが違う。hover()のほうが見やすい。ツールチップを個別に作らないでID名を1つにした場合は多少改善する。)

hover()と、mouseover()、のイベントの違いに拠るものである。このような使い方は余りないと思う。通常の使用では問題ない。早い解決法は親に「tool-tipクラス」を設定をしない事。


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


BOX幅はJSで、背景色などはCSSで設定可能です。高さは文字数により修正されます。



HTML JS CSS など


HTML

文章の中に span を入れて設定した例

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


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

text属性は当方が勝手に作った「属性名」ですが jquery では認識して読み出します。


JS

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

Example1 tool-tip10.js


//tool-tip10.js
//TEST
//mouseover mouseout-ACTION

(function($){

	$(function () {

		//表示位置の修正値
		var box_W=300;//チップ横幅 200-400
		//BOXと要素との位置、上方ならマイナス値をいれる
		var posY_v=-10;//自由
		var space=10;//左右余白 10-20
		var speed=400;//アニメ速度 200-800

		//------------------------------------------
		//其の外の変数
		var box_H=60;//暫定値、JSで変更される
		//オブジェクト容器
		var tipitem=[];
		//window幅の取得
		var window_W=$(window).width();

		//ループ
		$('.tool-tip').each(function (i) {

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

				//タイトルの取得
				var title_text=$(this).attr('text');

				//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);

				//高さ取得のためtext-box幅決定
				tipitem[i].find('.tip-text').css({'width':box_W-20});
				//tip-boxの高さを計算する/5+5=10
				box_H=tipitem[i].find('.tip-text').height()+10;

				//tip-boxの高さを決める/横幅は規定値
				tipitem[i].css({'width':box_W,'height':box_H});

				//要素の offset page 取得
				var offset=$(this).offset();
				var top_p=offset.top;//Y方向
				var left_p=e.pageX;//X方向

				//anime移動終点位置計算
				var top=top_p+posY_v-box_H;
				var left=left_p-box_W/2;//中央補正標準

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

				//CSS初期位置計算、状況に応じ変更できる
				var top_m=top_p;
				var left_m=left_p;

				//内部divブロック非表示
				tipitem[i].find('div').css({'display':'none'});
				//scale処理display:blockのこと
				tipitem[i].css({'width':0,'height':0,'top':top_m,'left':left_m});
				//アニメ実行
				tipitem[i].animate({'width':box_W,'height':box_H,'top':top,'left':left},speed,function(){
					//内部divブロック表示
					tipitem[i].find('div').css({'display':'block'});
				});

			});

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

				//tipboxを削除
				tipitem[i].remove();

			});

		});

	});

})(jQuery);

JS中の、注釈文を削除すれば、動作が少々速くなります。


CSS

Example1 tool-tip10.css
サンプルでのCSSの例です。現実には、ツールチップ(tip-box)のCSSがあればよい。


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

/* Example1 */
.tool-tip {
cursor:default;/*pointer*/
}
span.tool-tip {
width:auto;
height:20px;
padding:0;
background-color:#DDDDDD;
}


/* tooltip */
.tip-box {
display:block;
position:absolute;
left:0;top:0;
width:300px;
height:60px;
margin:0;
padding:0;
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;
}

.tip-box .tip-text {
position:absolute;
left:10px;top:5px;
width:280px;
height:auto;
margin:0;
text-align:left;
font-style:normal;
font-size:11px;
/font-size:75%;/*IE67*/
color:#888888;
overflow:hidden;
}

必要なのは tooltip の部分だけです。

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


簡単な解説


説明図

 

マウスが反応したpageX値を中心として表示しますが、左右では食み出さない様に補正されます。アニメ始点はクラス要素のY方向のoffset値が利用されます。


1. JS先頭で横幅などを設定ください。(ツールチップBOXの大きさ、説明文エリアはJSで修正されます、ここでは移動量move_vは使用していません)
2. アニメの始まる始点の、Y位置をかえればアニメの感じも違ってきます。
3. 色などは各自好みにあわせる。角丸陰影はCSS3です。未対応の場合は装飾なりません。
4. 動作を早くしたい場合は、JSの説明文などを削除ください。
5. CSSのツールチップBOXの大きさは暫定値です、JSで変更されます。


ツールチップBOXの始点をかえる

JSの次ぎの、始点計算値を変えればよい。初期設定では、要素のoffset位置のY値が挿入されている。


//CSS初期位置計算、状況に応じ変更できる
var top_m=top_p;

-------------------------------------------

始点をツールチップBOXの中心に
var top_m=top_p-(box_H/2)+posY_v;

始点をツールチップBOXの上方に
var top_m=top_p-box_H+posY_v*2;


hover()形式に変更したい場合


書式を変更するだけで、関数の中は同じです。


//ループ
$('.tool-tip').each(function (i) {
	$(this).hover(function (e) {

		mouseoverでの処理そのまま

	},
	function (e) {

		mouseoutでの処理そのまま

	});
});

これも「お祭り騒ぎ」です。直ぐに反応しない様に、次回は遅延タイマー(setTimeout)を組み込んでみます。


以上です。

 


[ この記事のURL ]


タグ:tooltip , series , memo , jquery

[ jQuery mouseover tooltip シリーズ記事 ]

jQuery tooltip/72012.12.12
jQuery mouseover tooltip/42012.12.11
jQuery mouseover tooltip/32012.12.10
jQuery mouseover tooltip/22012.12.09
jQuery mouseover tooltip/12012.12.08

 

ブログ記事一覧

年別アーカイブ一覧



[1]