This is a migrated thread and some comments may be shown as answers.

Wait to show

12 Answers 99 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 06 Feb 2014, 08:30 PM
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.

12 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 07 Feb 2014, 08:20 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Justin
Top achievements
Rank 1
answered on 10 Feb 2014, 03:27 PM
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);
                        }
                    });
0
Dimo
Telerik team
answered on 10 Feb 2014, 04:25 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Justin
Top achievements
Rank 1
answered on 10 Feb 2014, 04:38 PM
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
0
Justin
Top achievements
Rank 1
answered on 10 Feb 2014, 04:50 PM
Is there a certain mouseout element i should override? I cant seem to find it
0
Dimo
Telerik team
answered on 11 Feb 2014, 08:12 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Justin
Top achievements
Rank 1
answered on 24 Feb 2014, 04:54 PM
this worked perfectly. thanks!
0
John
Top achievements
Rank 1
answered on 22 Nov 2018, 04:08 PM

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.

0
John
Top achievements
Rank 1
answered on 23 Nov 2018, 09:09 AM
Just a clarification 'same manner' = original initial manner, i.e. to be hidden on mouseleave
0
Dimo
Telerik team
answered on 23 Nov 2018, 12:46 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
John
Top achievements
Rank 1
answered on 26 Nov 2018, 11:27 AM

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.

 

 

0
Ivan Danchev
Telerik team
answered on 28 Nov 2018, 11:31 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ToolTip
Asked by
Justin
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Justin
Top achievements
Rank 1
John
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or