POPSブログ

jQuery tooltip/6

176

  Category:  jquery2012/12/04 pops 

前ページ tooltip 5は 「移動フェードイン、アウト」ツールチップに「クローズボタン」付きの機能を追加したものです。それを「クローズボタン有り」の場合に em要素を取り込める様に改造しました。つまりリンクなども可能になります。CSS3装飾、高さ自動修正。

 

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


ツールチップに「クローズボタン」を付加して使用することも少ないと思いますが、html属性のテキストを読み込むタイプですから、リンクなどを埋め込むことは困難です。よってem要素を取り込める様に改造しました。
多少は効果的に使用できるのではないでしょうか。


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


1. クローズボタンを追加の時、em要素を取り込める様に改造、簡単なhtmlが書ける。
2. ツールチップBOXの横幅をJSで設定できます。よって高さは文字量で自動で調整します。
(説明文が長い場合もあるなどの理由で定形の大きさでは使い難い方はこちらがベター)
3. 装飾はCSS3で対応します。画像無しでも使用出来るよう改造可能です。


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


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

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


 

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


 

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

closeクラスを設定、クローズボタンを追加処理します。ボタンクリックで閉じる。TEXTが無い場合(TEXT優先)は、クラス設定要素の次ぎのEM要素(内部のEM要素指定可能)を読み出しますので。リンクなども書き込めます。

これは説明文です。closeクラスを設定しますと「閉じる」ボタンが追加され、クリックで非表示にもどります(EM2)。
リンク先 : LINK2

注意、text属性は当方が勝手に作った「属性名」です。▼下のボタンで少し変更を見ることが出来ます。


BOX幅の切替 : 200 250 300 400 :初期値 300

背景色の切替 :                         :初期値 #FFFFFF

BOX幅はJSで、背景色などはCSSで設定可能です。



HTML JS CSS など


HTML

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

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


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

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


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


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


JS

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

Example5 tool-tip5.js


//tool-tip5.js
//Example5

(function($){

	$(function () {

		//チップ横幅、表示位置の修正値
		var box_W=300;//チップ横幅初期値/JSでCSS修正
		var box_H=60;//暫定の高さ/自動修正
		var space=10;//左右のX余白
		var top_v=-90;//Y初期位置値h60の場合/自動修正
		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) {

					//closeクラスがあるか
					var hascrass=false;
					if ($(this).hasClass('close')) {
						hascrass=true;
					}

					//タイトルの取得、無ければundefined
					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 class="arrow-box">▼</div></div>');
					//オブジェクト代入
					tipitem[i]=$('#'+box_id);

					//title-textがない場合emを取得する/title-text優先表示
					if (!title_text && hascrass) {
						//var html_text=$(this).find('em').html();
						var html_text=$(this).next('em').html();
						tipitem[i].find('.tip-text').html(html_text);
					}

					//高さ取得のためtext-box幅決定
					tipitem[i].find('.tip-text').css({'width':box_W-20});
					//tip-boxの高さを計算する/15+5=20
					box_H=tipitem[i].find('.tip-text').height()+20;
					//tip-boxの高さを決める/横幅は規定値
					tipitem[i].css({'width':box_W,'height':box_H});
					//出現位置の修正/高さプラス30のY方向マイナス
					top_v=-(box_H+30);

					//要素の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;}

					//closeクラスのある場合、
					//close-btnを追加アクション設定、アニメ省略
					if (hascrass) {
						//close-btnを作るappend
						//テキストボタン
						//tipitem[i].append('<div class="close-btn" title="閉じる">×</div>');
						//画像ボタン
						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);

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


CSS

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


/* tool-tip5.css 日本語 */
/* Example5 */

.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;
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 em {
display:none;
}
.tip-box .arrow-box {
display:block;
position:absolute;
left:0;bottom:2px;
width:100%;
height:8px;
text-align:center;
line-height:8px;
font-size:11px;
/font-size:75%;/*IE67*/
color:#FF0000;
}
.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 {
position:absolute;
left:8px;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;
}

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

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

上記のCSS例では、「em」要素を display:none にしてあります。


簡単な解説


説明図


1. 基本的なことは、前ページ等を参照ください。
2. クローズボタンが必要なら、要素の「tool-tip3」クラスの後に「close」クラスを記入するだけです。
3. 説明文のエリアCSSが少し変更になった。JS先頭で横幅などを設定ください。
(BOXの大きさ、説明文エリアはJSで修正されます)
4. 色などは各自好みにあわせる。角丸陰影はCSS3です。未対応の場合は装飾なりません。
5. 長い文章の要素にはクローズボタンを設定しない方が賢明です。(マウス移動で直ぐOVERしてしまう)、またツールチップを多用するとページが「お祭り騒ぎ」に成りかねませんので、ご注意を!。
6. em要素の書き方などは、下記説明参照。


closeクラス設定で、「em」要素で aリンクなどを組み込みたい場合 1

text属性はテキストのみ記載できますが、htmlは記載できませんので、「em要素」を作り、htmlを書き込みます。

現在のでは「close」クラス設定がなされた要素の、次ぎの「em要素」のhtmlを取り込みます。text属性は書き込まないこと。(text属性に文章があればtextを優先して読み込みます)

次の例は、直後にある「em要素」を読み込み表示します。「em要素」内の html の書き方は自由。


通常の設定、spanに文章、emを書く

<p>文章.....<span class="tool-tip3" close" text="">説明文を表示するエリア。</span><em>説明文..............<br /><a href="http://xxxx.com/">LINK</a></em>文章.....</p>

divに画像、クローズボタンを追加、emを書く

<div class="tool-tip3 close" text=""><img src="画像URL" width="260" height="100" /></div>
<em>説明文..............<br /><a href="http://xxxx.com/">LINK</a></em>

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

text=""は下のように書いても良い
<span class="tool-tip3 close">

こちらが標準的なものです。text="" は、そのものが無いundefined状態でも可。
文章など表示しない場合は、「em」の書き方など調べてください。適正であれば表示します。


closeクラス設定で、「em」要素で aリンクなどを組み込みたい場合 2

場合によっては「em要素」をcloseクラス設定要素の、内部に書き込みたい場合もあるかも知れません。


divに画像、クローズボタンを追加、emを書く例で、説明すれば構造は以下のよう

<div class="tool-tip3 close" text="">
<img src="画像URL" width="260" height="100" />
<em>説明文..............<br /><a href="http://xxxx.com/">LINK</a></em>
</div>

JSを上記形式で「em」要素を書いた時に認識して処理できるように、変更します。


標準では、next('em')...の方を処理するようになっています

//title-textがない場合emを取得する/title-text優先表示
if (!title_text && hascrass) {
	//var html_text=$(this).find('em').html();
	var html_text=$(this).next('em').html();
	tipitem[i].find('.tip-text').html(html_text);
}

を、//部分を以下に変更して、find('em')...の方を有効にする

if (!title_text && hascrass) {
	var html_text=$(this).find('em').html();
	//var html_text=$(this).next('em').html();
	tipitem[i].find('.tip-text').html(html_text);
}

これで要素内部のemを取り込みます

文字でクローズボタンを作る

サンプルでは、背景画像を使用しています。完全にCSSでテキストを組み合わせてのボタンも可能です。
テキスト文字を入れるだけです。×、あるいは X、C、閉、など。最悪文字無でも認識は出来る。


文字クローズボタン &#215 &times;、背景などはCSSで変更
JSを変更
if (hascrass) {
	//close-btnを作るappend
	tipitem[i].append('<div class="close-btn" title="閉じる">×</div>');
}

CSSを変更
.tip-box .close-btn {
display:block;
position:absolute;
right:3px;top:3px;
width:9px;
height:9px;
margin:0;
padding:0;
text-align:center;
line-height:9px;
font-size:12px;
color:#FF0000;
background-color:#EEEEEE;
cursor:pointer;/*default*/
}

ブラウザ、IE6 7 8 9、Safari Firefox Chrome Opera、一応対応です。(IE10は未確認、大丈夫と思う)
CSS3角丸陰影対応は、IE9、Safari Firefox Chrome Opera、CSS3ブラウザを推奨します。(IE10は未確認)




使用画像など

原則、画像は使用者が制作します。

サンプル、クローズボタン画像、tip_close.gif - tip_close4.gif (9x9)


tip_close.gif tip_close2.gif tip_close3.gif tip_close4.gif

前のページは、このページのJSの原型です。

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


以上です。

 


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