指定した要素に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&#91;"color"&#93;+';background-color: '+options&#91;"background-color"&#93;+'; 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;
        
    };
}());