Home > 技術 > jQueryでツールチップを表示するシンプルなコード

jQueryでツールチップを表示するシンプルなコード

2009-04-19 (日)
技術

そこまでシンプルでもないかもしれませんが、一応書いてみた。

構成としては、

チップ用のdivタグを生成する
チップを表示する対象となるSelectorにマウスイベントをセットする

これだけ。

■プログラムコード
一応jQueryのPluginとして書いてみました。

(function($) {
		var id = "altTip",		// Tip id
			$this;				// Target elem

$.fn.jAltTip = function() {
			$this = this;
			
			if (!$("#" + id).length)
				// Tip html create
				$("<div>")
					.attr("id", id)
					.css({
						position: "absolute", display: "none", backgroundColor: "#888"
					})
					.appendTo("body");

var elem = $("#" + id), offset, margin = 10, opacity = 0.8;

// Event setter
			$($this)
				.mouseover(function(e) {
					offset = $(this).offset();
					elem.css({
							top: offset.top + "px", left: offset.left + "px",
							opacity: opacity, padding: "10px", color: "#FFFCF4",
							display: "block"
						})
						// altがない場合はinnerHTML
						.html($(this).attr("alt") ? $(this).attr("alt") : $(this).html());
				})
				.mouseout(function(e) {
					elem.css({display: "none"});
				})
				.mousemove(function(e) {
					offset = $(this).offset();
					elem.css({
							top: e.pageY + margin + "px", left: e.pageX + margin + "px"
						})
				});
		}
	})(jQuery);

このjsを読み込んだら、後は以下のように呼び出すだけ。

何度も呼ぶのがちょっと・・・
もうちょいキレイにして機能追加してPlugin化するのもありかな。

追記：
一応デモを用意してみた。
jAltTip.js - jQuery Plugin

Newer: MacBook Proの熱を下げる方法
Older: Papervision3D - BitmapLayerEffectを試してみた

Comments:0

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1184
Listed below are links to weblogs that reference: jQueryでツールチップを表示するシンプルなコード from HouseTect, JavaScript Blog

Home > 技術 > jQueryでツールチップを表示するシンプルなコード

RSS Feeds

Search

Recent Entries

このブログについて

author：hisasann.com

description：就職しました！
最近はJavaScript、Perl、Rails、Java（Struts+Spring+iBatis）なんかをいろいろといじっています。
今猛勉強中なのがActionScriptです。
アニメーション楽しい！

他に運営しているブログ：

利用しているWebサービス :

Tag cloud

カテゴリー

月別アーカイブ

jQuery Meetup

Visit jQuery Meetups

Page Top