1. #1
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    888
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default Corrected Tooltip with title support and "x-form-invalid-tip" Class

    Corrected Tooltip with title support and "x-form-invalid-tip" Class


    x-tip-invalid_with_title.PNG
    I stumpled upon the problem when using RowEditor. I wanted the tooltip, which appears when you try to click outside the RowEditor without even saving or cancelling, to be shown just as an invalid form field.

    First i just added "x-form-invalid-tip" class to thje tooltip, but then the Tooltip was messed up. It was because the tooltip-class does not support tooltips with titles (which are not used on form-error-tooltips). together with the x-form-invalid-tip class. I guess it was simply overseen, because rarely used.

    I also recognized the anchor-arrow also stays in blue instead of the red border from the invalid-form-class. So i adjusted all ofthem.

    As a result, you need to
    - overwrite "resources/images/default/form/error-tip-corners.gif" with the one provided in this post gif-file
    - save the provided file "error-tip-anchor-sprite.gif" in this post to "resources/images/default/qtip/"
    -add the following css at the end of ext-all.css

    Code:
    .x-form-invalid-tip .x-tip-anchor {
        background-image:url(../images/default/qtip/error-tip-anchor-sprite.gif);
    }
    
    
    .x-form-invalid-tip .x-tip-tc {
        background-repeat: repeat-x;
        background-position: 0 -62px;
        padding-top:6px;
    }
    
    
    .x-form-invalid-tip .x-tip-bc {
        background-repeat: repeat-x;
        background-position: 0 -118px;
        height:6px;
    }
    
    
    .x-form-invalid-tip .x-tip-bl {
        background-repeat: no-repeat;
        background-position: 0 -56px;
    }
    
    
    .x-form-invalid-tip .x-tip-br {
        background-repeat: no-repeat;
        background-position: right -56px;
    }
    - if you want to have this tooltip in RowEditor you need to overwrite the cls-line of function "showTooltip" in RowEditor.js

    Code:
    cls: 'errorTip x-form-invalid-tip',
    Attached Images

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,115
    Vote Rating
    59
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    Thanks for sharing your work with the community!
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

Thread Participants: 1

Tags for this Thread