JavaScript + Ajax 実践サンプル集 - カスタムツールチップ

カスタムツールチップ

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのTooltipDemo()プラグインを利用してツールチップのカラーをカスタマイズして表示します。サンプルの「link」上にマウスを移動するとカスタムツールチップが表示されます。同様にテキストボックス上にマウスを移動するとカスタムツールチップが表示されます。ツールチップは、title属性に設定します。

このサンプルを編集して試してみる

ToolTipDemo(bgcolor, fgcolor)

$(function() {
 $("a,input").ToolTipDemo("red", "yellow"); 
});

外部スクリプトHEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/*
 *
 * Copyright (c) 2006 Sam Collett (http://www.texotela.co.uk)
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 * 
 */

 
/*
 * jQuery ToolTip Demo. Demo of how to add elements and get mouse coordinates
 *	There is also a ToolTip plugin found at http://interface.eyecon.ro/,
 *	  which uses a CSS class to style the tooltip, but shows it below the input/anchor, rather than where the mouse is
 *
 *
 * @name     ToolTipDemo
 * @param    bgcolour  Background colour
 * @param    fgcolour  Foreground colour (i.e. text colour)
 * @author   Sam Collett (http://www.texotela.co.uk)
 * @example  $("a,input").ToolTipDemo('#fff');
 *
 */
$.fn.ToolTipDemo = function(bgcolour, fgcolour)
{
	this.mouseover(
		function(e)
		{
			if((!this.title && !this.alt) && !this.tooltipset) return;
			// get mouse coordinates
			// based on code from http://www.quirksmode.org/js/events_properties.html
			var mouseX = e.pageX || (e.clientX ? e.clientX + document.body.scrollLeft : 0);
			var mouseY = e.pageY || (e.clientY ? e.clientY + document.body.scrollTop : 0);
			mouseX += 10;
			mouseY += 10;
			bgcolour = bgcolour || "#eee";
			fgcolour = fgcolour || "#000";
			// if there is no div containing the tooltip
			if(!this.tooltipdiv)
			{
				// create a div and style it
				var div = document.createElement("div");
				this.tooltipdiv = div;
				$(div).css(
				{
					border: "2px outset #ddd",
					padding: "2px",
					backgroundColor: bgcolour,
					color: fgcolour,
					position: "absolute"
				})
				// add the title/alt attribute to it
				.html((this.title || this.alt));
				this.title = "";
				this.alt = "";
				$("body").append(div);
				this.tooltipset = true;
			}
			$(this.tooltipdiv).show().css({left: mouseX + "px", top: mouseY + 3 + "px"});
		}
	).mouseout(
		function()
		{
			if(this.tooltipdiv)
			{
				$(this.tooltipdiv).hide();
			}
		}
	);
	return this;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/tooltipDemo/jquery.tooltipdemo.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $("a,input").ToolTipDemo("#fef", "#e00");  
    });
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <p>
    Mouseover the link or textbox to see the effect. 
    <a href="http://jquery.com/docs/" title="jQuery Documentation">Link</a>. 
    <br />  
    Text box:
    <input type="text" title="Enter your name" />
  </p>