简单的div气泡

这两天做个展示页，需要鼠标放在特定的标签上弹出一些内容，发现暂时手头上没有这种插件。

自己写一个，也好维护。

具体方法如下

    var bindBubble = function (ele, content) { //要绑定的div标签元素和要展示的html内容
      var $ele, $bubble;
      $ele = ele instanceof (jQuery) ? ele : $(ele);
      //选中bubble 默认用class=bubble的div做气泡，如果没有就自动添加一个
      if ($('.bubble').length == 0) {
        var bubble = document.createElement('div');
        $bubble = $(bubble);
        $bubble.addClass('bubble');
        $bubble.css({
          position: 'absolute', left: '0px', top: '0px',  '200px', height: '80px', //可以在这里改气泡的样式
          background: 'yellowgreen', 'border-style': 'solid', 'border-color': 'black', 'border-radius': '10px',
          'box-shadow': '10px 10px 10px rgba(0,0,0,0.5)', 'border-width': '1px',padding:'2px'
        });
        $bubble.appendTo(document.body);
        $bubble.hide();
      } else {
        $bubble = $('.bubble');
      }
      //选中bubble结束

      $ele.data('bubbleHtml', content);
      $ele.mouseover(function () { //绑定元素的mouseover事件和mouseleave事件
        var currentOffSet = $(this).offset();
        var targetOffSet = { top: (currentOffSet.top - 20 - $bubble.height()) + 'px', left: (currentOffSet.left - 30) + 'px' };
        $bubble.css(targetOffSet);
        $bubble.slideDown(200);
        $bubble.html($(this).data('bubbleHtml'));
      });
      $ele.mouseleave(function () {
        $bubble.hide();
        $bubble.css({ top: '0px', left: '0px' });
        $bubble.html('');
      });
    }

调用的时候，像这样:

bindBubble($('#tag1'), '我们是害虫');

 需要引用jQuery，气泡的换行什么的还没有试，但可以自己调节气泡中的html才更改

最后的效果如下