bui框架 tooltip 使用

 BUI.use('bui/tooltip', function (Tooltip) {
   
        var t1 = new Tooltip.Tip({
            trigger: '#t1',
            alignType: 'top', //方向
            titleTpl: '<div class="tooltip"><div class="tooltip-inner">{title}</div></div>',
            offset: 15, //距离左边的距离
            title: '说明,<br>线上扫码和线下支付2种方式'
        });
        t1.render();
        var t2 = new Tooltip.Tip({
            trigger: '#t2',
            alignType: 'top', //方向
            titleTpl: '<div class="tooltip"><div class="tooltip-inner">{title}</div></div>',
            offset: 15, //距离左边的距离
            title: '说明<br>收货方式支持2种模式;<br> 1、快递<br> 2、门店自取<br> 选择快递模式，需要填写收货地址信息<br> 如果选择门店自取，默认收货地址为店铺地址。<br>'
        });
        t2.render();
    });

.tooltip {
    z-index: 1070;
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    filter: alpha(opacity=0);
    opacity: 1;
    line-break: auto;
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    background-color: #666666;
    border-radius: 4px;
}

.x-align-top .x-align-arrow-inner, .x-align-top-left .x-align-arrow-inner, .x-align-top-right .x-align-arrow-inner {
    border-top: 8px solid #666666;
    top: -9px;
    left: -6px;
}

<span class="x-icon x-icon-small x-icon-error pull-right">
                                <i id="t1" title="" class="icon icon-white icon-bell"></i></span>
<span class="x-icon x-icon-small x-icon-error pull-right">
                                <i id="t2" title="" class="icon icon-white icon-bell"></i></span>

 

转载于:https://www.cnblogs.com/silences/p/6841676.html