New to Kendo UI for jQuery? Start a free 30-day trial

Content

configuration

The text or the function whose result will be shown within the Tooltip. By default, the Tooltip will display the content of the title attribute of the target element. To retrieve the title attribute of the target from inside the content function, use target.data("title").

If the content that is passed to the Tooltip includes scripts, they will be executed. If this is not desired, strip any undesired content in advance.

content

Object|String|Function

<div id="container">
    <span title="foo">Some content</span>
    <span title="bar">Some more content</span>
</div>

<script>
    $(document).ready(function() {
      $("#container").kendoTooltip({
        filter: "span",
        content: function(e) {
          var target = e.target; // the element for which the tooltip is shown
          return target.data("title") + " " + target.text(); // set the element text as content of the tooltip
        }
      });
    });
</script>

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

<script>
    $(document).ready(function() {
      $("#target").kendoTooltip({
        content: "Tooltip content!"
      });
    });
</script>

content.url

String

Specifies a URL or a request option from which the Tooltip will load its content.

For URLs which start with a protocol (for example, http://), an iframe container element will be automatically created. This behavior may change in future versions, so it is advisable to always use the iframe configuration option.

<span id="target" title="Tooltip content">
  Some content
</span>

<script>
  $(document).ready(function() {
    $("#target").kendoTooltip({
      content: {
        url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html"
      },
      width: 220,
      height: 280
    });
  });
</script>