Wait to show

[Justin]

I know it isnt supported out of the box but has anyone customized the tooltip to only show if your selector has been in focus for X amount of time. Basically I have a bunch of links that show tooltips and I only want to show the tooltip if they stop on the link for 500ms or so instead of instantly. The showAfter isnt what I am looking for because it shows even if you just stumble over the link. 

Basically I am looking at cancelling the default behavior and setting up focus/blur timers to manually show or something.

[Dimo]

Hi Justin,

Actually showAfter should be exactly what you need. If you believe otherwise, please elaborate on your scenario.

http://jsfiddle.net/dimodi/L4rkK/

Regards,
Dimo
Telerik

[Justin]

I am using remote binding also. if i add showAfter: 1000 it will always show after 1 second if i just quickly go over and leave a link

   angular.element("#association-link-container").kendoTooltip({
                        filter: ".association-link",
                        content: {
                            //this will never be used it will get formatted below
                            url: "/StandardObjects/GetHoverAssociation"
                        },
                        autoHide: false,
                        position: "bottom",
                        callout: false,
                        animation: false,
                        show: function (e) {
                            //move the tooltip to the left!
                            $(".k-tooltip").offset({ left: 10 });
                            this.popup.wrapper.width("98%");
                        },
                        requestStart: function (e) {

                            //get the association key AKA association type
                            var assocKey = e.target.data("key");

                            //get the object type 
                            var assocObjectType = e.target.data("object-type");

                            //get the parent entity id
                            var eId = $scope.entityId;

                            //get the parent object type
                            var parentObjectType = $scope.objectType;

                            //get the can add new option
                            var canAddNew = e.target.data("can-add-new");

                            //reformat the url to add the query string parameters
                            e.options.url = kendo.format(urlFormat, assocKey, assocObjectType, eId, parentObjectType, canAddNew);
                        }
                    });

[Dimo]

Hello Justin,

If you remove the autoHide:false setting, the Tooltip will show as you desire.

If you require a close button, then you can still remove autoHide, but attach a mouseout handler to your tooltip targets and hide the tooltips manually.

http://docs.telerik.com/kendo-ui/api/web/tooltip#methods-hide

Regards,
Dimo
Telerik

[Justin]

Yes that will work. I will override the mouse out to not hide it and add a manual close button.

We are showing a grid in the hover over so it gets a little weird if you go down to use the grid with the auto hide on

[Justin]

Is there a certain mouseout element i should override? I cant seem to find it

[Dimo]

Hello Justin,

Actually, the correct event to override is mouseleave, sorry about the confusion. Here is what you can execute before initializing the Tooltip widget on the page.

kendo.ui.Tooltip.fn._mouseleave = function(e) {
    clearTimeout(this.timeout);
};

The above method lacks the code, which hides the Tooltip when you leave the target. Only the code, which prevents showing the Tooltip when you leave the target, is left.

Regards,
Dimo
Telerik

[Justin]

this worked perfectly. thanks!

[John]

Hello Dimo,

 

Is it possible to specify this fix on a single tooltip?

I have multiple tooltips on the page that need to work in the same manner.

 

Thanks.

[John]

Just a clarification 'same manner' = original initial manner, i.e. to be hidden on mouseleave

[Dimo]

Hi John,

In order to change the API or internal behavior for a specific widget instance, you need to overwrite the source after widget initialization and only for the desired widget object:

$("#widget-id").kendoTooltip({
  // configuration here
}).data("kendoTooltip")._mouseleave = function(e) {
  // override here
};

As always, it is worth mentioning that such techniques may not yield the desired results in all scenarios or with future product versions.

Regards,
Dimo
Progress Telerik

[John]

Hello Dimo,

Thanks for your answer.

However with this code, the default mouseleave event and the newly defined one are executed and hence the tooltip is closed.

Is there a way how to not execute the default mouseleave event, but only the one assigned to the tooltip? I've tried e.preventDefault() but it hasn't resolved the problem.

 

Thanks a lot.

 

 

[Ivan Danchev]

Hello John,

The original event closes the Tooltip by calling:

this._closePopup(e.currentTarget);

if you want to prevent this behavior or control when the Tooltip will close you can override the original event and close the widget in the newly attached handler: dojo example.

Regards,
Ivan Danchev
Progress Telerik