所需DOM结构
本组件作为一个弹出层的效果，通过预先设置一个隐藏的弹出层，并且设置该弹出层的触点，通过鼠标滑入和移出触点来展示和隐藏弹出层效果

<div class="first-trigger">我只是个触点而已，把鼠标滑到我身上</div>
<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
          'trigger':'.first-trigger',
          'align':{
                  'node':'.first-trigger',
                  'offset':[0,0],
                  'points':['cr','cc']
                  }
            }">
    <div style="background-color: yellow; height: 100px; width: 100px;">
       我是一个弹出层
    </div>
</div>

组件调用方法

<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
          'trigger':'.first-trigger',
          'align':{
                  'node':'.first-trigger',
                  'offset':[0,0],
                  'points':['cr','cc']
                  }
            }">
    <!--  code  -- >
   </div>

配置参数列表

支持class和id选择器的写法

points: [tr,tl],  // [‘tl’, ‘tr’]表示popup的tl 与参考节点的 tr 对齐 ，
                 具体tl，tr表示的意义和值看下面截图, 

                 t(top)，c(center), b(bottom),l(left),r(right)
offset: [0,0]     // 有效值为 [n, m] ， points对齐后，offset值，
                  一般可用于微调, n和m分别表示对齐两个点

                  在x,y坐标之间的偏移量

配置项align中的points的说明
触点与弹出层的对齐方式（align中的points配置） 元素及参考元素上各自的九个不同位置点(‘tl’, ‘tc’, ‘tr’, ‘cl’, ‘cc’, ‘cr’, ‘bl’, ‘bc’, ‘br’) 如下图所示:

注意： 触点目前只允许包含在#content内。不允许影响页头页尾：

例子

<div class="first-trigger">我只是个触点而已，把鼠标滑到我身上
<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{
      'trigger':'.first-trigger',
      'align':{
              'node':'.first-trigger',
              'offset':[0,0],
              'points':['cc','cc']
              }
        }">
    <div style="background-color: blue; height: 100px; width: 100px;">
       我是一个弹出层
    </div>
</div>
</div>

.hidden{
    display:none;
}

.first-trigger,.first-trigger1{
    width:200px;
    height:200px;
    border:solid 1px red;
    margin:10px;
}