himawan_r
himawan_r

Reputation: 1780

Prevent kendo tooltip hide/close when clicking outside the tooltip?

I know that there are people ask kendo to prevent kendo tooltip from close/hide whenever we click outside the tooltip. They are suggesting it here but seems that it has not been implemented yet.

I couldn't find the method which closes/hides when we click outside kendo tooltip so far. I only found the event triggered when we click on close or cancel button on kendo tooltip. But is there any way/hackish way to achieve this using javascript/jquery/anything?

Upvotes: 2

Views: 5200

Answers (2)

ryan
ryan

Reputation: 1463

You can override the close function of the kendo UI popup class to prevent execution. My solution was to throw a custom exception in the 'hide' handler and prevent the close from happening if this custom exception is caught.

kendo.ui.Popup.fn.close = function (close) {
    return function (skipeffects) {
        try {
            close.call(this, skipeffects);
        } catch (err) {
            // suppress error if its the right type
            if (!(err instanceof PreventTooltipHideException)) {
                throw err;
            }
        }
    }
}(kendo.ui.Popup.fn.close);


var tooltip = $('#' + areaId).kendoTooltip({
    content: "Hello World!",
    hide: function (e) {
         throw new PreventTooltipHideException();
    },
    autoHide: false
});

Upvotes: 0

Jarosław Kończak
Jarosław Kończak

Reputation: 3407

Like you see in link that you included the kendo tooltip (with autoHide: false property) hides when you:

  • click outside the tooltip
  • scroll page
  • hit Esc

Until Telerik will not implement function to prevent it, the only way is using jquery event.stopImmediatePropagation(). For example for block tootlip from hide when you click outside you can write:

$("#target").kendoTooltip({
    autoHide: false
});
$('html').on('mousedown', function(e){
    e.stopImmediatePropagation();
});

Working demo: http://dojo.telerik.com/ugUCI

Unfortunately it will prevent any html onmousedown events like DropDownLists/ComboBoxes hiding etc.

Upvotes: 1

Related Questions