NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

QuickHelp

import QuickHelp from '@concur/nui-widgets/lib/Popover/QuickHelp';

QuickHelp components are specialized Popover components attached to “?” icons. Unlike Popover components, QuickHelp components can only display text, not arbitrary content.

Examples

Standalone

When used as standalone components, QuickHelp components can be placed anywhere in the page markup.

const quickHelp = (
    <QuickHelp
        message='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
        textClose='Close'
        textShowQuickHelp='Show Quick Help'
        title='Quick Help' />
);

const HIGQuickHelpEx01 = () => (
    <Section
        headingLevel={3}
        title='Sample Heading Text'
        titleContent={quickHelp}
        titleContentAlignment='left'>
        <div className='row'>
            <div className='col-xs-6'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </div>
        </div>
    </Section>
);

Within FormGroup

When used within FormGroup components, QuickHelp components can be included in any order relative to the form’s other child components. The FormGroup will properly render it after the ControlLabel.

<FormGroup>
    <ControlLabel>
        Field Label
    </ControlLabel>
    <QuickHelp
        message='Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
        textClose='Close'
        textShowQuickHelp='Show Quick Help'
        title='Quick Help' />
    <FormControl />
</FormGroup>

Usage

Properties

Property Type Default Description
message Node Required Collection of React components to be placed in popover’s content area.
textClose String Required Localized assistive text for the popover’s close button.
textShowQuickHelp String Required Localized assistive text for the show quick help (“?”) button.
title String Required Popover heading.
className String   Custom classes to add to the <button> element.
placement String or String[] ['bottom', 'top', 'left', 'right'] Placement of the popover relative to its icon. Options are 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'.
popoverProps Object   Properties to pass through to the popover.
size String 'lg' Size of the icon. Options are 'lg', 'md', 'sm'. Will be ignored if used within a FormGroup as it will be driven by the form’s size property.