Hints (tool-tips)

/*  PAX Hint (tool-tip) demo
   
    The below javascript will add hints to various elements.
*/
pax.load.onloaded( function() {
    //  Simple hint, with all the default options
    pax.widget.hint.init( {
        'hintme': 'Just text in the initialisation, using the defaultModel for the configuration'
    } );
   
    //  Two hints initialised in one statement, and the use of default configuration options (2nd argument).
    pax.widget.hint.init( {
        'hintme2': {
            message: 'This text is offset, to show below the element, and has default delays',
            x: -70,
            y: 16
        },
        'hintme3': {
            //  Note the use of opacity: 0, as we're applying the pax.fx.fadeIn function on show.
            hideFunc: pax.fx.fadeOut,
            opacity: 0,
            showFunc: pax.fx.fadeIn,
            message: 'This text fades in and out, with a hide delay of 1000ms (overridden from 300ms)',
            showDelay: 0,
            hideDelay: 1000
        }
    }, {    //  Set defaults for all hints. You could optionally set show and hide function here
        width: 200,
        showDelay: 200,
        hideDelay: 300
    } );
   
    //  Hint with various options including a chained effect for showing the hint.
    pax.widget.hint.init( {
        'hintme4': {
            message: 'Here we set the CSS class, custom show function<br/><br/>Click to hide.',
            opacity: 0,
            hintClass: 'errorMessage',
            showFunc: function( id ) {
                var ele = pax.$( id );
                ele.style.display = 'none';
                ele.style.overflow = 'hidden';
                pax.util.setPosition( ele, { height: 0 } );
                pax.css.opacity( ele, 100 );
                pax.fx.chain( [
                    {   target: id,
                        effect: 'reveal',
                        value: { endSize: 90 },
                        duration: 1000,
                        direction: true
                    },
                    {   effect: 'colourFade',
                        value: {startColour: 'ffaaaa', endColour: 'ffffff'},
                        duration: 500
                    },
                    {   effect: 'colourFade',
                        value: {startColour: 'ffffff', endColour: 'ffaaaa'},
                        duration: 300
                    }
                ] );
            },
            clickToHide: true
        }
    } );
   
    //  This uses the title by default
    pax.widget.hint.init( ['hintme5'] );
   
    //  This uses the alt attribute, and fades in / out
    pax.widget.hint.init( {
        'hintme6': {
            messageAttribute: 'ALT',
            hideFunc: pax.fx.fadeOut,
            opacity: 0,
            showFunc: pax.fx.fadeIn
        },
        'hintme7': {
            hintClass: 'hintGrowMessage',
            width: '',
            message:    'This is a test for a wide text hint.<br/>' +
                        'Notice that we set the width to empty string in the initialisation<br/>' +
                        'The hint will grow with the content.'
        }
    } );
   
    //  This uses the title by default
    pax.widget.hint.init( ['hintme8'], {
        hideDelay: 2000,
        dontHideOnHover: true
    } );
   
    //  This shows the hint both on mouseover and focus
    pax.widget.hint.init( {
        'hintme9': {
            message: 'You can also use hints in the validation system, with complete control over individual hints!',
            events: ['mouseover', 'focus']
        }
    } );
   
   
} );