Immediately Show and Not Hide ToolTip

3 posts, 0 answers
  1. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 26 Feb 2014 Link to this post

    when a user changes the value in a text box, it is validated and if it fails validation, I want to border the text box with red and show a tooltip that does not go away until the user changes the value

    Here's the change event code:

    $(document).on("change", "input.Percentage", function () {
        var grid = $("#grid-pct").data("kendoGrid");
        var row = $(this).closest('tr');
        var dataItem = grid.dataItem(row);
        var rawVal = $(this).val();
        if (rawVal >= 0 && rawVal <= 100) {
            var data = {
                Percentage: rawVal,
                Username: dataItem.Username,
                UpdateDate: dataItem.UpdateDate
        } else {
            $(this).kendoTooltip({ autoHide: false, content: 'value can only be between 0 and 100' });
            $(this).css('border-color', '#f00');

  2. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 26 Feb 2014 in reply to Ed Link to this post

    To follow up on this... The tooltip shows only when I hover over the text box.  I want the tooltip to show up as soon as the red border shows up and not go away until the text box is revalidated using this same method (yes, I know - the success portion doesn't yet destroy the tooltip and remove the red border)
  3. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 28 Feb 2014 Link to this post

    Hello Ed,

    Generally speaking you can disable the tooltip disappearing by setting the autoHide option of the widget to false (I noticed that you already did that).
    In addition you can control the widget behavior through the API methods - show and hide.

    I am not sure what your exact implementation looks like and respectively where the problem comes from. The code which you provided is incomplete. Is it possible for you to provide a more complete jsBin sample whith mock data that can be run and tested locally? In this way I will be able to examine your scenario (probably you are hitting rebinding problems) and help you resolve it. Please provide such project and I will check it right away.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top