如何在没有任何 api 或 ajax 的情况下为每个单元格在 kendo 工具提示中添加 html 表？答案

【问题标题】：How to add html table inside kendo tooltip for each cell without any api or ajax?如何在没有任何 api 或 ajax 的情况下为每个单元格在 kendo 工具提示中添加 html 表？
【发布时间】：2017-01-17 07:12:48
【问题描述】：

我想在没有任何服务器请求的情况下为每个单元格的工具提示中添加 html 表格。 Kendo 通过 api 调用提供此功能。

$(document).ready(function() {
var tooltip = $("#target").kendoTooltip({
  iframe: false,
  content: {
    url: "*http://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html*"
    },
    width: 220,
    height: 280
  }).data("kendoTooltip");
});

有什么方法可以在不发出任何请求的情况下添加 html 吗？

【问题讨论】：

标签： kendo-ui kendo-grid kendo-tooltip

【解决方案1】：

tooltip的内容配置不仅可以接受URL，还可以接受字符串。该字符串可以包含 HTML，如下所示：

td {
  background: red;
  width: 10px;
  height: 10px;
}

<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>


<body>
  <span id="target">
    Some content
  </span>

  <script>
    $(document).ready(function() {
      $("#target").kendoTooltip({
        content: "<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>"
      });
    });
  </script>
</body>

【讨论】：

【解决方案2】：

content option也可以设置为暴露事件数据的函数，包含目标元素，因此可以根据目标元素的内容返回动态字符串（包括HTML元素，如前所述），例如：

Example

【讨论】：