Simulate Modal Behavior of the Tooltip

Environment

Product

Progress® Kendo UI® Tooltip for jQuery

Description

Can I simulate modal behavior on the Tooltip?

Solution

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
    </span>
    <script>
      $(document).ready(function() {
        $('#target').kendoTooltip({
          // 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>')
            modalOverlay.insertAfter('#target');
          },
          hide: function(e) {
            // Remove the overlay from the DOM
            $('.overlay').remove();
          }
        });
      });
    </script>
    <style>
      // 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;
      }
    </style>

See Also

• Kendo UI Tooltip JavaScript API Reference