0

使用 KendoUI dataViz 库，在我的折线图中显示的工具提示包含一个带有子 p 标签的 div。这个 p 标签的内容是动态的，当 p 标签为空并且数据点悬停在我运行一个函数来检查段落标签中内容的长度时，如果它是空的，则隐藏整个包含 div。有一个问题，即 div 似乎只隐藏了一秒钟，然后在鼠标停留在数据点上时再次显示它自己。这是一个例子。

编辑：下面是我现在使用 OnaBai 的方法实现工具提示的方式。它仍然无法正常工作。如果 p 标签中没有字符，则 if 条件应该运行第一个块。

 tooltip: {
    visible: true,
    border: {
        width: 1
    },
    font: "10px MS Trebuchet, Arial, sans-serif",
    template: function (a) {
        if (!$(".tooltip-alert p").text().trim().length) {
            return mTypeName + "&nbsp;" + a.value + unitName + " <br/>" +
                   a.dataItem.measurementtime + " " + a.dataItem.measurementdate + "<br/>" +
                   "<div class='tooltip-alert'>" +
                   "<p></p>" +
                   "</div>";
        } else {
            return mTypeName + "&nbsp;" + a.value + unitName + " <br/>" +
                   a.dataItem.measurementtime + " " + a.dataItem.measurementdate + "<br/>" +
                "<div class='tooltip-alert'>" +
                    "<div class='statType-icon alertIcon-" + a.dataItem.alertid + "'></div>" +
                    "<p>" + a.dataItem.alertname + "</p>" +
                "</div>";
        }
    }
},
4

1 回答 1

2

不要试图隐藏它，而是将 定义tooltip为应用逻辑的函数。例子：

tooltip: {
    visible: true,
    font: "10px MS Trebuchet, Arial, sans-serif",
    template: function(a) {
        if (!a.dataItem.alertname) {
            return "Unit name &nbsp; " + a.value + " some variable<br/>" +
                    a.dataItem.measurementtime + " " + a.dataItem.measurementdate + "<br/>" +
                    "<div class='tooltip-alert'>" +
                    "</div>";
        } else {
            return "Unit name &nbsp; " + a.value + " some variable<br/>" +
                    a.dataItem.measurementtime + " " + a.dataItem.measurementdate + "<br/>" +
                    "<div class='tooltip-alert'>" +
                    "<div class='statType-icon alertIcon-" + a.dataItem.alertid +"'>BG img</div>" +
                    "<p>" + a.dataItem.alertname + "</p>" +
                    "</div>";
        }
    }
},

将 HTML 的内容用作逻辑条件p。

于 2013-04-09T21:31:36.430 回答