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

Simulate Modal Behavior of the Tooltip


Product Progress® Kendo UI® Tooltip for jQuery


Can I simulate modal behavior on the Tooltip?


Place a semi-transparent &lth;div&gth; element as an overlay over the entire HTML page. Make sure that the Tooltip is the only element to remain above the overlay.

    <span id="target" title="Tooltip content">
      Click me to show the Tooltip
      $(document).ready(function() {
          // Show the Tooltip on click
          showOn: 'click',
          autoHide: false,
          show: function(e) {
            // Create and add the overlay to the DOM
            var modalOverlay = $('<div class="overlay"></div>')
          hide: function(e) {
            // Remove the overlay from the DOM
      // Style the overlay and its parents to cover the entire page
      html, body, .overlay {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;

      .overlay {
        background-color: rgba(0,0,0,0.3);
        position: absolute;
        top: 0;

See Also

In this article