我用bootstrap 写了个小提示框div,想放在 tooltip中,请问怎么搞?
开网上有人用
position: function (point, params, dom, rect, size) {
$(dom).html('')
}的方式,但是我试了下,这么做echarts会覆盖掉bootstrap中的css样式,请问各位大神 有什么更好的,让bootstrap的div嵌入 tooltip的方法和代码,谢谢
配置项如下
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);'
},
};