纯CSS的jQuery的气泡提示组件

1. [代码][JavaScript]代码     

//调用说明
//$(selector).bub($(selector) | string[, options]);
//示例: $('#demo1').bub('hello, world!');
//options 说明
//defaults: {
//    color: '#e6e6e6',               //背景颜色
//    padding: '10px',                //内边距
//    radius: '5px',                  //圆角半径(css3)
//    shadow: 'none',                 //阴影(css3)
//    left: 0,                        //位置x轴偏移
//    top: 0,                         //位置y轴偏移
//    arrow_size: '15px',             //气泡的箭头大小
//    arrow_direct: ['top', 'left'],  //气泡的箭头指向方位([0]:'top'|'bottom',[1]:'left'|'right')
//    click_blank_hide: true          //点击页面空白处时是否销毁气泡
//}
 
(function () {
  $.fn.extend({
    bub: function (content, opts) {
      var merge = function (all, segment) {
          var ret = {};
          for (var o in all) {
            ret[o] = segment[o] === undefined ? all[o] : segment[o];
          }
          return ret;
        };
      var defaults = {
        color: '#e6e6e6',
        padding: '10px',
        radius: '5px',
        shadow: 'none',
        left: 0,
        top: 0,
        arrow_size: '15px',
        arrow_direct: ['top', 'left'],
        click_blank_hide: true
      };
      opts = merge(defaults, opts || {});
      this.each(function () {
        if ($(this).data().buber) {
          $(this).un_bub();
        }
        var bub_box = $('

\
                    \
                    \
                    \
                    \
                    \
                    \

');
        $('body').append(bub_box);
        $(this).data().buber = bub_box;
        $(this).attr('ns_bub_binder', opts.click_blank_hide);
        if (content instanceof $) {
          content = content.clone();
          content.show();
        }
        bub_box.find('.ns_bub_wrapper').append(content);
      });
    },
    un_bub: function () {
      this.each(function () {
        var bub_box = $(this).data().buber;
        if (bub_box === undefined) return;
        delete $(this).data().buber;
        bub_box.remove();
      });
    }
  });
  $(function () {
    $(document).click(function (e) {
      e = e || window.event;
      var src = e.target || e.srcElement;
      if ($(src).attr('class') == 'ns_bub_box' || $(src).attr('class') == 'ns_bub_wrapper' || $(src).attr('ns_bub_binder') !== undefined) return;
      $('*[ns_bub_binder=true]').un_bub();
    });
  });
})(window);