指定した要素にalt属性があった場合にalt属性をtips表示してくれる、jQueryのプラグインです。(探せばいくらでも出てくるようなプラグインですが・・・一応公開。)
MIT・GPLのデュアルライセンスです。自由にお使い下さい。利用に関しては、自己責任でお願いします。バグ等報告があれば、コメント欄にどうぞ。
更新履歴
・1.0.0 … 一般公開。
使い方
$("img").altips();
ダウンロード
こちらからダウンロード(右クリックして名前を付けてファイルを保存)するか、下記ソースコードをコピーして使って下さい。
/** * jQuery altips plugin * version 1.0.0 * Copyright (c) 2012 DAICHI (http://www.p-darts.jp) * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ (function(){ //指定したものにAlt属性があれば出すプラグイン $.fn.altips = function(config){ var targetDom = $(this); var defaults = { "background-color" : "#3791D3", "color" : "#ffffff", "x" : 20, "y" : -4 }; var options = $.extend(defaults, config); $(document).on("mouseover", this.selector, function(event){ if($(event.target).attr("alt") != "" && $(event.target).attr("alt") != undefined){ var x = event.pageX + options["x"]; var y = event.pageY + options["y"]; //altがあるので、それをtipsのようにだす。 $("body").append('<span class="altTips" style="display:inline-block; border-radius: 2px; padding: 2px 10px; box-shadow: 1px 2px 3px rgba(0,0,0,0.3); color: '+options["color"]+';background-color: '+options["background-color"]+'; position: absolute; top:' + y + 'px; left:' + x + 'px; z-index: 9999;">' + $(event.target).attr("alt") + '</span>'); } }).on("mousemove", this.selector, function(event){ if($(event.target).attr("alt") != "" && $(event.target).attr("alt") != undefined){ var x = event.pageX + options["x"]; var y = event.pageY + options["y"]; $(".altTips").css({"top": y+"px", "left": x+"px"}); } }).on("mouseout",this.selector, function(event){ if($(event.target).attr("alt") != "" && $(event.target).attr("alt") != undefined){ $(".altTips").remove(); } }); return this; }; }());