前段时间做需求时。积累下一个小组件，这个小组件是实现类似title提示的功能。它支持同步和异步地向浮出层中渲染数据。

它支持的配置都有哪些

    var configs = {
        'offset': [3,5],                    
        'triggerElement': '',               
        'rootId':'',                        
        'width': 100,                       
        'showArrow': true,                  
        'arrowPosition':'topLeftArrow',     
        'adaptPopLayerPostion': true,       
        'needLoadingImg':false                  
    };

offset

微调浮出层的位置

triggerElement

需要绑定划过显示浮出层事件的元素选择器

rootId

triggerElement的父节点选择器,可以不指定,如果不指定，默认为body

width

浮出层的宽度，默认为100

showArrow

是否显示浮出层上的箭头，默认显示

arrowPosition

如果要显示浮出层上的箭头，那么箭头的方向是什么（左上角，右上角，左下角，右下角）？默认左上角

adaptPopLayerPostion

是否要自适应浮出层的位置，如果要自适应的话，箭头的位置就是默认的左上角了，当浮出层自动调整了位置后，箭头的位置也会自动调整，用户设置的箭头位置并不起作用。

needLoadingImg

浮出层中是否需要Loading图标，这是为了异步地请求数据时，等待数据返回并渲染这段时间时显示正在加载的图标，当数据返回时，会用返回的数据替换这个图标。

一个供外部调用的方法

renderDataToLayer这个方法供创建好浮出层的实例后调用，像刚刚创建的浮出层中渲染数据。

用法

    var popLayer = new XiaoJiUtil.OverflowLayer({
      'offset': [0,20],
      'triggerElement': 'a.moreInformation',
      'rootId': '#content',
      'width': 300
    });

    $('a.moreInformation','#content').mouseenter(function(){
      popLayer.renderDataToLayer('
hello world!
');
    });

Demo

大家可以到这里查看实例。大家可以缩小浏览器的窗口，然后再看浮出层的位置，看看有哪些变化。