tooltip 怎么嵌入用bootstrap写的div容器，使提示框显示指定内容？ECharts Gallery

20:11:45图表已生成
代码
option = {
    tooltip : {
        show : true,          //默认显示
        trigger : 'item',       //触发类型，默认数据项触发
        showContent : true,     //是否显示提示框浮层
        alwaysShowContent : true,   //默认离开提示框区域隐藏，true为一直显示
        triggerOn : 'click',          //提示触发条件，mousemove鼠标移至触发，还有click点击触发
        showDelay : 0,               //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
        hideDelay : 200,             //浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
        enterable : true,           //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
        position : 'right',       //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
        confine : false,//是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
        transitionDuration : 0.4,   //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
        position: function (point, params, dom, rect, size) {
            $(dom).html('<div class="container" style="width: 450px;height:230px;"><div class="row clearfix"><div class="col-md-12 column"><div class="portlet yellow-crusta box"><div class="portlet-title"><div class="caption"><i class="fa fa-cogs"></i>Order Details</div><div class="actions"><a href="javascript:;" class="btn btn-default btn-niconico"><i class="fa fa-pencil"></i> Edit </a></div></div><div class="portlet-body"><div class="row static-info"><div class="col-md-5 name"> Order #:</div><div class="col-md-7 value"> 12313232 <span class="label label-info label-sm"> Email confirmation was sent </span></div></div><div class="row static-info"><div class="col-md-5 name"> Order Status:</div><div class="col-md-7 value"><span class="label label-success"> Activity </span></div></div><div class="row static-info"><div class="col-md-5 name"> Grand Total:</div><div class="col-md-7 value"> $175.25</div></div><div class="skillbar border-top" data-percent="35%"><div class="skillbar-title">Web design</div><div class="skill-bar-percent">55%</div><div class="skillbar-bar"></div></div><div class="skillbar" data-percent="80%"><div class="skillbar-title">development</div><div class="skill-bar-percent">80%</div><div class="skillbar-bar"></div></div><a href="http://www.baidu.com"> <button type="button" class="btn btn-default btn-block btn-primary">查看详情</button></a></div></div></div></div></div>');

            // $('div[id=toptip]').show();
        },

        // formatter: function (params, ticket, callback) {
            
        // },
        backgroundColor : 'rgba(50,50,50,0.7)',   //提示框浮层的背景颜色。
        borderColor :  '#333',                  //提示框浮层的边框颜色。
        borderWidth : 0,                       //提示框浮层的边框宽。
        padding : [
            0,  // 上
            0, // 右
            0,  // 下
            0, // 左
        ],
        textStyle : {
            color:'#ffffff'
        },
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
    },
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
