jQueryを使ってのツールチップのライブラリはネット上にも山のようにありますが、
どうも理想と合ったものがなかったので
TITLE属性を利用した簡単ツールチップの作り方 jQuery編 :: 5509(+1)
を参考にさせてもらいあれこれ改修かけて作ってみました。

ソース内のtitle属性を利用してマウスオーバーでツールチップを出現させるタイプのもの。

まずは動作サンプルから(下はiframeなのでツールチップがちょっと欠ける場合があります。)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

title属性に記述されている内容がツールチップ内に表示されます。
title属性にはある程度ソースを記述することも可能なので、
テキストの装飾や画像貼付けなども実現可能です。

スクリプトは以下の様な感じに。

◆SCRIPT ———————————————————–
$(function(){
 $(“body *”).filter(function(){
  return this.title && this.title.length > 0;
 }).each(function(){
  var self = $(this), title = self.attr(“title”);
  self.mouseover(function(e){
   $(this).attr(“title”,”");
   $(“body”).append(“<div id=’ttp’>”+ title +”</div>”);
   $(“#ttp”)
   .css(“position”,”absolute”)
   .css(“top”,(e.pageY) + 15 + “px”)
   .css(“left”,(e.pageX) + 15 + “px”)
   .css(“display”,”none”)
   .css(“filter”,”alpha(opacity=85)”)
   .css(“opacity”,”0.85″)
   .show(“fast”)
  }).mousemove(function(e){
   $(this).attr(“title”,”");
   $(“#ttp”)
   .css(“top”,(e.pageY) + 15 + “px”)
   .css(“left”,(e.pageX) + 15 + “px”)
  }).mouseout(function(){
   $(this).attr(“title”,title);
   $(“#ttp”).remove();
  });
 });
});
——————————————————————–

マウスオーバーでツールチップ用の<div id=”ttp”>タグを生成しています。
ツールチップの装飾自体もjQuery側でCSSを記述していますが、
ここは別途CSSファイルを用意する形でも大丈夫。

出現方法は「show」で動きを付けていますが、
ここを「fadeIn」や「slideDown」とすることで別の演出をつけることも可。
もちろん:animeteを使用すれば複雑な動きも加えられます。

ツールチップの配置位置を指定している
——————————————————————–
.css(“top”,(e.pageY) + 15 + “px”)
.css(“left”,(e.pageX) + 15 + “px”)
——————————————————————–
はカーソルからの距離を意味していますが、
これを近づけてしまうとIE8で動作した際、
カーソルがツールチップの上に乗ってしまい、
マウスアウト状態と判断されチップが消えてしまうことが。。。

開始行で$(“body *”)としてあるのでページ内の全てのタグを対象として、
title属性が付いているものを選んでいます。
何かと使用することが多い「Thickbox」を同じページで組み込む際には
ここを
——————————————————————–
$(“body *:not(.thickbox)”).filter(function(){
——————————————————————–
とすれば、class=”thickbox”が付いているタグのtitle属性は対象外となります。
(Thickboxはname属性からの動作も可能ですが。)

こんな感じですが何かの際には是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (1)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでツールチップ。

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR