Wait to show

8 posts, 0 answers
  1. Justin
    Justin avatar
    17 posts
    Member since:
    May 2012

    Posted 06 Feb 2014 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 07 Feb 2014 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Justin
    Justin avatar
    17 posts
    Member since:
    May 2012

    Posted 10 Feb 2014 in reply to Dimo Link to this post

    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);
                            }
                        });
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Feb 2014 Link to this post

    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!
  6. Justin
    Justin avatar
    17 posts
    Member since:
    May 2012

    Posted 10 Feb 2014 in reply to Dimo Link to this post

    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
  7. Justin
    Justin avatar
    17 posts
    Member since:
    May 2012

    Posted 10 Feb 2014 in reply to Dimo Link to this post

    Is there a certain mouseout element i should override? I cant seem to find it
  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Feb 2014 Link to this post

    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!
  9. Justin
    Justin avatar
    17 posts
    Member since:
    May 2012

    Posted 24 Feb 2014 in reply to Dimo Link to this post

    this worked perfectly. thanks!
Back to Top
Kendo UI is VS 2017 Ready