zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    【2020NOI.AC省选模拟#5】C. 光滑序列
    【2020NOI.AC省选模拟#2】A. 旋转
    【2020NOI.AC省选模拟#1】B. Trie
    Redis 配置
    Redis 删除策略
    Redis 事务
    Redis 持久化
    Redis 通用指令
    Redis 数据类型实战案例
    Redis sorted_set
  • 原文地址:https://www.cnblogs.com/silences/p/6841676.html
Copyright © 2011-2022 走看看