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

Newer
Older

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を試してみた

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な情報をあなたに

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

Search

Ads

Amazon.co.jp ウィジェット

人気のエントリー

Recent Entries

書いてる人について

author：hisasann.com
lab : lab.hisasann.com
twitter : フォローミー
facebook : Hisa Yoshi

Javascriptをメインに使っているプログラマーの技術ブログです。ちょっぴりアートでちょっぴりオモシロイものを作ってます。
記事の内容はjQuery、jQueryMobile、HTML5、CSS3などなど…

是非こちらからRSSの登録をお願いいたします！
損はさせないぜっ！

RSS Feedを登録する

作ったもの :

products

他に運営しているサイト：

DigitalGrounder, クリエイティブな情報をあなたに

Tag cloud: ActionScript addon Ads Ajax Algorithm Amazing Android Anime Apache AppleScript Application Aptana baby Blog Bloger BlogParts Book Book Review Bookmark Bookmarklet bot Box2d browser Camera Canvas Catalyst Chrome CM Communication Cool CPAN CSS CSS3 DB design Dinner DJ DOM DS Eclipse Editor Electro Emulator Engineer English Facebook Firebug Firefox Flash Flex Flickr Food Freesoft Funny Gadget Game Geek Generator git github Google Google Wave GoogleAnlytics Greasemonkey Grow Hacker Haml hatena HTML HTML5 iBatis IDE Idea IE IE6 IE7 IE8 Image ImageMagick Interface iPad iPhone iPod IT Item iTunes Java JavaScript jQuery jQueryMobile jsDeferred JsUnit Keyboard Lanch Language LifeHack Lightbox Mac MacBookPro MacPorts Mash-up MeCab Mobile Monitor MOO Motivation Movalble Type Movie msysgit Music MySql Netscape News nginx Nikki node.js OpenSource Opera Oracle Papervision3D Pasta PC Perl PhoneGap Photoshop PHP PL/SQL Plugin Presentation Program Progression prototypeJS Python QUnit Ramen Rhino RSS Ruby Ruby On Rails Safari Sakura Sanitizing Search Seasar2 Security SEO Shell Shortcut Sinatra Skill Smartphone SMO SNS Spring SQL SSH SSL Struts SVN Test TextMate Titanium Mobile Titanium Studio Tomcat Tool TortoiseGit Tumblr Twitter Unix Vim Vista VMware VPS Web Web2.0 Webkit WebService Wii Wiki Windows Word WordPress Work Workshop WTP XAMPP XCode XMLHttpRequest2 XSS XUL Yahoo YouTube YUI Zen-Coding
月別アーカイブ
Powered by: Powered by
Movable Type Commercial 4.261