微信小程序用＜cover-view＞自定义tooltip样式覆盖canvas 且带有点击过几秒tooltip消失功能

wxml

<cover-view wx:if="{{isShowImg}}" class='rich-textq' style='top:{{topL}}px;left:{{leftL}}px;background-color :rgba(50, 50, 50, 0.7);padding:10px;font-size:12px;color:#fff;'>
	<cover-view wx:for='{{itemList}}' style="line-height: 20px;" wx:key="index">{{item}}</cover-view>
</cover-view>

wxcss

.rich-textq{
  position: fixed;
  transform:translateZ(1110);
  top: 0;
  z-index: 99999999999999;
  padding: 10px;
  background:'rgba(50,50,50,0.7)'
}

tooltip

 tooltip: {
            trigger: 'axis',
            transitionDuration: 0,
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle: { color: 'rgba(150,150,150,0)' }
            },
            confine: true,
            appendToBody: true,
            position: function (point, params, dom, rect, size) {
              var x = 0; // x坐标位置
              var y = 0; // y坐标位置
              // 当前鼠标位置
              var pointX = point[0];
              var pointY = point[1];
              // 提示框大小
              var boxWidth = 0;
              var boxHeight = 0;
              that.setData({
                isShowImg: true
              })
              wx.createSelectorQuery().selectAll('.rich-textq').boundingClientRect(function (rect) {
                boxWidth = rect[0].width;
                boxHeight = rect[0].height;
                if (boxWidth > pointX) {
                  x = 5;
                } else { // 左边放的下
                  x = pointX - boxWidth;
                }
                if (boxHeight > pointY) {
                  y = 5;
                } else { // 上边放得下
                  y = pointY - boxHeight;
                }
                let itemList = [params[0].name, '车次总数：' + (params[0].value === zeroValue ? 0 : params[0].value)]
                if (params[0].data.vehicleTypeDataList) {
                  let obj = params[0].data.vehicleTypeDataList;
                  for (let k in obj) {
                    itemList.push(k + "：" + obj[k])
                  }
                }
                that.setData({
                  itemList: itemList, // tooltip 要显示的名称及数据
                  topL: pointY, // tooltip 上边距
                  leftL: x, // tooltip 左边距
                })
                that.setTooltipBox() // 点击一下4.5秒后tooltip消失
              }).exec()
            },
            renderMode: 'richText'
          },

效果

可以看到 tooltip 的层级已经盖住了canvas 而且超出盒子不会被切割 哈哈哈哈哈…
如果需要点击一下过几秒消失代码如下：

  setTooltipBox: function () {
    var that = this;
    if (t) {
      clearTimeout(t);
    }
    t = setTimeout(() => {
      that.setData({
        isShowImg: false,
      })
    }, 4500) // tooltip消失时间
  },