Question

使用KendoUI dataViz库，我的折线图中显示的工具提示包含带有子p标记的div。这个p标签的内容是动态的，当p标签为空时，当数据点悬停在我运行时，我运行一个检查段标记内容长度的函数，如果它是空的，则隐藏整个包含div。我是有一个问题，div似乎只隐藏了一瞬间，然后再次显示自己，而鼠标仍然在数据点上方。 Here is an example

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

 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>";
        }
    }
},

Answer 1

不要试图隐藏它，而是将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的内容用作逻辑条件。

如果<p>标记为空，则Kendo UI在工具提示中隐藏div </p>

1 个答案: