pax.widget.hint

pax.widget.hint.init = function( args, defaultModel )

Shows hints at the given targets

Parameters

• target - Element to show the hint near, you MUST supply this.
• events - List of which event(s) to show the hint on, default: [‘mouseover’]
• hideEvents - List of which event(s) to hide the hint on, default: [‘mouseout’]
• message - Hint message
• messageAttribute - If we want to use a specific attribute for the message text, eg: alt or title
• hintClass - The CSS class name, default is ‘hintMessage’
• width - Width of the hint in pixels, default is 120
• height - Height of the hint, leave this empty, for height to automatically fit the content
• x - How many pixels to offset the hint by, horizontally from the element
• y - How many pixels to offset the hint by, vertically from the elements right side
• offsetElement - Element to optionally offset the hint from, if you don’t want the trigger element
• opacity - Opacity in percent, default is 100
• clickToHide - Do we wait for mouse out of the element, or a click on the hint?  Default is false
• dontHideOnHover - Do we keep showing the hint until you mouse out?
• showDelay - Delay in milliseconds to wait till we show the hint on hover, default is null
• hideDelay - Delay in milliseconds to wait till we hide the hint, default is 20, should always be at least 20
• id - Optional ID of hint box, default is auto generated
• showFunc - Optional function to show the hint with, see pax.fx for functions.
• hideFunc - Optional function to hide the hint with, see pax.fx for functions.

Returns

Element of the hint

Example

<a href='#' id='widget.hint.init.example1'>Hover me for hint</a>
[:.
    pax.widget.hint.init( {
        'widget.hint.init.example1': 'testing 123'
    } );
:]

This example shows a simple hint

Example

<a href='#' id='widget.hint.init.example2'>Hover me for hint that fades in and out, with a delay</a>
[:.
    pax.widget.hint.init( {
        'widget.hint.init.example2': {
            showFunc: pax.fx.fadeIn,
            hideFunc: pax.fx.fadeOut,
            opacity: 0,
            message: 'testing 123<br>new line',
            showDelay: 300,
            hideDelay: 2000
        }
    } );
:]

This example shows a hint that fades in and out.  Note the use of “opacity: 0”, as that is required for the fadein.

Example

<a href='#' id='widget.hint.init.example3'>Hover me for hint that fades in and out, with a delay</a>
<img src='http://paxjs.com/resource/logo.png' id='widget.hint.init.example3.img'/>
[:.
    pax.widget.hint.init( {
        'widget.hint.init.example2': {
            message: 'testing 123<br>new line',
            showFunc: null,
            showDelay: null
        },
        'widget.hint.init.example3.img': 'This is a message from an image hover'
    }, {
        showFunc: pax.fx.fadeIn,
        hideFunc: pax.fx.fadeOut,
        opacity: 0,
        showDelay: 300,
        hideDelay: 2000
    } );
:]

This example shows two hints that fade in and out.  We are using the defaultModel feature, to allow the hints to share the configuration.  Note that you can override the default configuration parameters, by specifying them within each hint, as done on the first hint.

Example

<a href='#' id='widget.hint.init.example4'>Hover me for hint initialised from the title attribute</a>
[:.
    pax.widget.hint.init( ['widget.hint.init.example4'] } );
:]

This example shows a hint that uses the title attribute for the message, this allows fallback if JS is not available.  Note that you can set which attribute to use, by specifying a messageAttribute in the configuration