tooltip show after ajax request

2 posts, 1 answers
  1. Thomas
    Thomas avatar
    19 posts
    Member since:
    Aug 2013

    Posted 16 Dec 2013 Link to this post

    hey guys
    I'm facing the following issue right now:

    we use a grid which has a custom toolbar button which runs some function in the background. the code looks like this:

    $("#CategorizeNow").click(function categorizing (e) {
            e.preventDefault();
     
            $.ajax({
                url: '@Url.Action("RunAutoCategorization", "Pattern")',
                beforeSend: function() {
                    $("#CategorizeNow").addClass("k-state-disabled").html("Categorizing!");
                },
                success: function () {
     
                    $("#CategorizeNow").removeClass("k-state-disabled").html("Finished");
                    $("#CategorizeNow").kendoTooltip({
                        content: "successfully finished",
                        position: "top",
                        animation: {
                            close: {
                                effects: "fade:out"
                            },
                            open: {
                                effects: "fade:in",
                                duration: 1000
                            }
                        }
                    }).show($("#CategorizeNow"));
                     
     
     
                }
     
            });
        });
    what we want to achieve is: after the categorize button is clicked it should be disabled first. when the background operation succeeded, the tooltip should be displayed at the top of the categorize now button and the button should get its original state again and be enabled again.

    right now the tooltip is only showing if the operation has finished and the mouse enters the button.

    any advice would be helpful.

    thx in advance and kind regards
    thomas
  2. Answer
    Thomas
    Thomas avatar
    19 posts
    Member since:
    Aug 2013

    Posted 16 Dec 2013 Link to this post

    Hi Thomas,

    Basically the $(selector).kendoTooltip({}) returns the HTML element(s) matching the selector, wrapped in a jQuery object. That object also happens to have a show method and that is what is called. In order to show the Tooltip, you should get its instance first, for example: 
    $("#CategorizeNow").kendoTooltip({
        content: "successfully finished",
        position: "top",
        animation: {
            close: {
                effects: "fade:out"
            },
            open: {
                effects: "fade:in",
                duration: 1000
            }
        }
    }).data("kendoTooltip").show($("#CategorizeNow"));


    Regards,
    Alexander Popov
    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
Back to Top