1

I want to add html table inside a tooltip for each cell without any server request. Kendo provides this feature with api calling.

$(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");
});

Is there any way to add html without making any request?

aaqib90
  • 510
  • 1
  • 5
  • 16

2 Answers2

0

The content configuration of the tooltip can accept not only a URL, but also a string. This string can contain HTML, like this:

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>
Shai
  • 3,659
  • 2
  • 13
  • 26
0

The content option can also be set as a function that exposes event data, containing the target element, so you can return a dynamic string (including HTML elements, as previously mentioned), based on the content of the target element, e.g.:

Example

topalkata
  • 2,028
  • 2
  • 12
  • 13