此插件是一款互联网上非常实用的插件，漫画在项目中也经常用到，为了方便网友们使用，漫画就将此功能封装成一个通用的插件，代码很简洁，代码总共加起来了40多行，最适合网友学习用，主要实现了上、下、左、右四个方位的显示，带有可关闭操作，插件带有3个参数设置：如下

1、position：箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r)

2、value ：小箭头偏离左边和上边的位置

3、content ：显示的提示内容

 

用法很简单、步骤如下：

1、引入Jquery核心包

2、引入插件样式文件

3、引入插件包

4、初始化插件

 

效果如下：

插件源码如下：

$(function() {   $.fn.manhua_bubbletips = function(options) {    var defaults = {        position : "t",   //箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r)     value : 15,    //小箭头偏离左边和上边的位置     content : ""   //内容         };    var options = $.extend(defaults,options);      var offset = $(this).offset();    var bid = parseInt(Math.random()*100000);      $("body").prepend('<div class="docBubble" id="btip'+bid+'"><i class="triangle-'+options.position+'"></i> <i class="close" title="关闭" id="btipc'+bid+'">关闭</i><div class="tl"><div class="inner"><div class="cont">'+options.content+'</div></div></div><div class="tr"></div><div class="bl"></div></div>');    var $btip = $("#btip"+bid);    var $btipClose = $("#btipc"+bid);    var h = $(this).height();    var w = $(this).width();     switch(options.position){     case "t" ://当它是上面的时候      $(".triangle-t").css('left',options.value);      $btip.css({ "left":offset.left+w/2-options.value  ,  "top":offset.top+h+14  });      break;     case "b" ://当它是下面的时候      $(".triangle-b").css('left',options.value);      $btip.css({ "left":offset.left+w/2-options.value  ,  "top":offset.top-h-7-$btip.height()  });      break;     case "l" ://当它是左边的时候        $(".triangle-l").css('top',options.value);      $btip.css({ "left":offset.left+w+10  ,  "top":offset.top+h/2-7-options.value });      break;     case "r" ://当它是右边的时候         $(".triangle-r").css('top',options.value);      $btip.css({ "left":offset.left-w+25-$btip.width()  ,  "top":offset.top+h/2-7-options.value });      break;    }    $btipClose.live("click",function(e){      $btip.hide();     });     }  });

项目主页：http://www.open-open.com/lib/view/home/1345818742008