index.html

     
          
      
           
           
           
       
            
        
             
         
          鼠标移过来    
          
                   
           
            改变背景颜色        
            
             显示        
             
              隐藏    
              
               
                    // 初始化插件    $(".common_text").myToolTip({"background-color":"black"});    $(".btn-changecolor").click(function(){        $(".common_text").myToolTip({"background-color":"#F00"});    });    $(".btn-showtips").click(function(){        $(".common_text").myToolTip("show");    });    $(".btn-hidetips").click(function(){        $(".common_text").myToolTip("hide");    });
               
              
             
            
           
          
         
        
       
      
     

jquery.mytips.js

/* * 一个基于jQuery插件开发最佳实践方法写的简单插件 */(function($){    $.fn.myToolTip = function(options) {        // 插件默认配置项        var defaults = {            'direction': 'top',            'background-color': 'black'        };        var opts = $.extend({}, defaults, options);        var methods = {            // 插件初始化方法            init: function(options) {                var $el = $(this);                var $tip = $el.data("myTip");                if($tip){                    // 当插件已存在则重置样式                    $tip.css({                        "backgroundColor":opts["background-color"]                    }).find(".triangle").css({                        "borderColor":opts["background-color"]+" transparent transparent transparent"                    });                    return $tip;                };                var pos = $.extend({}, $el.offset(), {                    width: this.offsetWidth,                    height: this.offsetHeight                });                // 插件初始化                $tip = $('
     
      
       '+$el.attr("title")+'
       
        ').appendTo(document.body);                // 迁移原来的title至data-title                $el.attr("data-title",$el.attr("title")).removeAttr("title");                $tip.css({                    "left":(pos.left + pos.width/2 - $tip.width()/2)+"px",                    "top":(pos.top - pos.height/2 - $tip.height())+"px",                    "backgroundColor":opts["background-color"]                }).find(".triangle").css({                    "borderColor":opts["background-color"]+" transparent transparent transparent"                });                // 绑定元素的hover事件                $el.hover(function(){                    $tip.show();                },function(){                    $tip.hide();                });                $el.data("myTip",$tip);                return $el;            },            show: function() {                var $el = $(this);                var $tip = $el.data("myTip");                $tip.show();            },            hide: function() {                var $el = $(this);                var $tip = $el.data("myTip");                $tip.hide();            },        };        return this.each(function(index) {            // this keyword is DOM Element            var $this = $(this);            if (methods[options]) {                return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));            } else if (typeof options === 'object' || !options) {                return methods.init.apply(this, arguments);            } else {                $.error('Method ' + method + ' does not exist on jQuery.myPlugin');            }        });    }})(jQuery);