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消失时间 },