An error occurred Success

CSS
Hover the classes to see matching element(s) in the example
xfInput matches an Element that represents a XForms input element
xfAlert matches an Element that represents a XForms alert element
xfControl matches an Element that represents a XForms control
xfLabel matches the label part of an XForms control
xfValue matches the widget part of an XForms control

# Tooltip Alert Handler

This form shows the usage of the Tooltip alert handler.

Add the CSS class 'ToolTipAlert' to some element in your document to choose this alert type.

| XForms 1.1 Links
Recommendation
Quick Reference

## Example

To enabled the Tooltip Alerts the CSS class 'ToolTipAlert' must be added to the html:body element

Each field must have more than 5 characters to become valid A-label Your input is not long enough The input must be longer than 5 characters Bb-label Your input is not long enough The input must be longer than 5 characters Ccc-label Your input is not long enough The input must be longer than 5 characters Dddd-label Your input is not long enough The input must be longer than 5 characters Send

## XForms Markup

    <xf:bind nodeset="grouped-data">
        <xf:bind nodeset="group">
            <xf:bind nodeset="a" constraint="string-length(.) > 5"></xf:bind>
            <xf:bind nodeset="b" constraint="string-length(.) > 5"></xf:bind>
            <xf:bind nodeset="c" constraint="string-length(.) > 5"></xf:bind>
            <xf:bind nodeset="d" constraint="string-length(.) > 5"></xf:bind>
        </xf:bind>
    </xf:bind>

    <xf:group ref="grouped-data/group" appearance="compact">
        <p>To enabled the Tooltip Alerts the CSS class 'ToolTipAlert' must be added to the html:body element</p>
        <xf:label>Each field must have more than 5 characters to become valid</xf:label>
        <xf:input id="input1" ref="a">
            <xf:label>A-label</xf:label>
            <xf:alert id="input1-alert">Your input is not long enough</xf:alert>
            <xf:hint id="input1-hint">The input must be longer than 5 characters</xf:hint>
        </xf:input>
        <xf:input id="input2" ref="b">
            <xf:label>Bb-label</xf:label>
            <xf:alert id="input2-alert">Your input is not long enough</xf:alert>
            <xf:hint id="input2-hint">The input must be longer than 5 characters</xf:hint>
        </xf:input>
        <xf:input id="input3" ref="c">
            <xf:label>Ccc-label</xf:label>
            <xf:alert id="input3-alert">Your input is not long enough</xf:alert>
            <xf:hint id="input3-hint">The input must be longer than 5 characters</xf:hint>
        </xf:input>
        <xf:input id="input4" ref="d">
            <xf:label>Dddd-label</xf:label>
            <xf:alert id="input4-alert">Your input is not long enough</xf:alert>
            <xf:hint id="input4-hint">The input must be longer than 5 characters</xf:hint>
        </xf:input>
    </xf:group>

    <xf:trigger>
        <xf:label>Send</xf:label>
        <xf:send submission="echo"></xf:send>
    </xf:trigger>

## Notes

It currently does not matter where you put the 'ToolTipAlert' class as it's simply searched in the whole document but it is recommended to up it as high in the hierarchy of the document as possible which shortens searching time. Later on when we support several handlers at a time hierarchy may become relevant again.

When dealing with subforms it should be noted that one alerthandler in a subform cannot overwrite the one already loaded by its parent. It seems at least questionable if a subform should be able to switch the alert handling mode. For this reason this sample runs in its own window (not-embedded).

## Limitations

Only one alert handler for the whole document is supported currently.