Inline Help

Available since 1.0.0 Last updated 1.3.0

Inline help is used to display help text in a popover, often inline with headers, body text and form labels.


Default Position

The default positioning of inline help component is bottom right.

Bottom Right (Default) Lorem ipsum dolor sit amet, consectetur adipiscing. 
Bottom Right (Default)

<span class="fd-inline-help">
    <span class="fd-inline-help__content fd-inline-help__content--bottom-right">
        Lorem ipsum dolor sit amet, consectetur adipiscing.
    </span>
</span>


Bottom Left Position

Bottom Left Lorem ipsum dolor sit amet, consectetur adipiscing. 
Bottom Left

<span class="fd-inline-help">
    <span class="fd-inline-help__content fd-inline-help__content--bottom-left">
        Lorem ipsum dolor sit amet, consectetur adipiscing.
    </span>
</span>


Bottom Center Position

Bottom Center Lorem ipsum dolor sit amet, consectetur adipiscing. 
Bottom Center

<span class="fd-inline-help">
    <span class="fd-inline-help__content fd-inline-help__content--bottom-center">
        Lorem ipsum dolor sit amet, consectetur adipiscing.
    </span>
</span>


Right Position

Right Lorem ipsum dolor sit amet, consectetur adipiscing. 
Right

<span class="fd-inline-help">
    <span class="fd-inline-help__content fd-inline-help__content--right">
        Lorem ipsum dolor sit amet, consectetur adipiscing.
    </span>
</span>


Left Position

Left Lorem ipsum dolor sit amet, consectetur adipiscing. 
Left

<span class="fd-inline-help">
    <span class="fd-inline-help__content fd-inline-help__content--left">
        Lorem ipsum dolor sit amet, consectetur adipiscing.
    </span>
</span>