实现自定义提示框

yaoxin

FR没有比较的好的提示，单元格的内容提示也是基于html元素本地的title属性<p title="Free Web tutorials">W3School.com.cn</p>

实现多行文字，还不能直接设值说明文字1\n说明文字2，需要通过js设置（文档）

$("td[id^=B1-]").attr("title","月底在职的销售员\n含月底当天离职");

复制代码

而且没有很好的效果。

这里我们使用第三方的一个库（boostrap）来实现自定义的提示。（更灵活，方便，美观）
看下效果

实现方法
1. 拖一个lable控件到参数栏，控件名称为 label0，主要和代码中保持一致就行

2. body的初始化事件中添加以下代码

setTimeout(function() {
var options = {
container: 'body',
placement: "left",
html: true,
trigger: 'hover' ,
template: `<div class="tooltip" role="tooltip" style="background: rgba(0,0,0,0); width: 400px; opacity:1; transform: translateX(-10px);">
<div class="tooltip-arrow" style="position: absolute; margin-top: -4px; border:1px solid #ddd; width: 10px; height: 10px; background: #FFF; transform: rotateZ(-45deg); border-width: 0 1px 1px 0; right: -5px"></div>
<div class="tooltip-inner" style="line-height: 1.6; padding: 10px 15px; max-width: 100%; background: #fff; color: #666; text-align: left; border: 1px solid #ddd; font-size: 14px;box-shadow: 0px 0px 8px 4px #ccc;">
</div></div>`,
title: function() {
return `<p style="font-size: 15px; color: #000000; margin: 5px 0;"></p>
<p><span style="color: #1697ef; margin: 5px 0;">曝光人数：</span>指点击了标签的用户总数</p>
<p><span style="color: #1697ef; margin: 5px 0;">曝光率：</span>点击商品人数在曝光人数的占比，=点击商品人数/曝光人数</p>
<p><span style="color: #1697ef; margin: 5px 0;">点击购买意向率：</span>点击购买人数在点击商品人数中的占比，=点击购买人数/点击商品人数</p>
<p><span style="color: #1697ef; margin: 5px 0;">购买率：</span>购买人数在点击商品人数的占比，=购买人数/点击商品人数</p>`
},
}
$(".pmeter-container div[widgetname^=LABEL0]").html("<div id='zbhy_lable0' style='text-align: right; padding-top: 6px;font-size: 12px; font-family: SimSun;color: #000;'><span> 指标含义</span><span style='display: inline-block;line-height: 14px;color: #999;text-align: center;font-size: 12px;border-radius: 50%;height: 15px;width: 15px;border: 1px solid;transform: scale(0.75);'>?</span></div>");
$(".pmeter-container div[widgetname^=LABEL0]").css("position","absolute").css("width","80px").css("left","auto").css("right","20px");
$(".pmeter-container").css("position","initial");
$(".pmeter-container div[widgetname^=LABEL0]").tooltip(options);
}, 500);