# Contextual Help

Contextual help can be used to show extra information about the state of a component.

## Example

For the contextual help component, both the `heading` and `content` props are required.

```python
from deephaven import ui


my_contextual_help_basic = ui.contextual_help(
    heading="Need Help",
    content="If you are having issues accessing your account, contact our customer support team for help.",
    variant="info",
)
```

## Placement

The contextual help component supports different placement options for when the popover’s positioning needs to be customized.

```python
from deephaven import ui


@ui.component
def ui_contextual_help_placement_examples():
    return [
        ui.contextual_help(
            heading="Need Help",
            content="If you are having issues accessing your account, contact our customer support team for help.",
            variant="info",
        ),
        ui.contextual_help(
            heading="Need Help",
            content="If you are having issues accessing your account, contact our customer support team for help.",
            variant="info",
            placement="top start",
        ),
        ui.contextual_help(
            heading="Need Help",
            content="If you are having issues accessing your account, contact our customer support team for help.",
            variant="info",
            placement="end",
        ),
    ]


my_contextual_help_placement_examples = ui_contextual_help_placement_examples()
```

## Events

The `on_open_change` prop is triggered when the popover opens or closes.

```python
from deephaven import ui


@ui.component
def ui_contextual_help_events_example():
    is_open, set_is_open = ui.use_state(False)
    return [
        ui.flex(
            ui.contextual_help(
                heading="Permission required",
                content="Your admin must grant you permission before you can create a segment.",
                variant="info",
                on_open_change={set_is_open},
            ),
            align_items="center",
        )
    ]


my_contextual_help_events_example = ui_contextual_help_events_example()
```

## Visual Options

The `variant` prop can be set to either “info” or “help”, depending on how the contextual help component is meant to help the user.

```python
from deephaven import ui


@ui.component
def ui_contextual_help_variant_examples():
    return [
        ui.contextual_help(
            heading="Permission required",
            content="Your admin must grant you permission before you can create a segment.",
            variant="info",
        ),
        ui.contextual_help(
            heading="What is a segment?",
            content="Segments identify who your visitors are, what devices and services they use, where they navigated from, and much more.",
            variant="help",
        ),
    ]


my_contextual_help_variant_examples = ui_contextual_help_variant_examples()
```

## API reference

A contextual help is a quiet action button that triggers an informational popover.

**Returns:** `Element` The rendered contextual help component.

<ParamTable param={{"module_name": "deephaven.ui.", "name": "contextual_help", "parameters": [{"name": "heading", "type": "Any", "description": "The heading of the popover."}, {"name": "content", "type": "Any", "description": "The content of the popover."}, {"name": "footer", "type": "Any | None", "description": "The footer of the popover.", "default": "None"}, {"name": "variant", "type": "Literal['help', 'info'] | None", "description": "Indicates whether contents are informative or provides helpful guidance.", "default": "'help'"}, {"name": "placement", "type": "Literal['bottom', 'bottom left', 'bottom right', 'bottom start', 'bottom end', 'top', 'top left', 'top right', 'top start', 'top end', 'left', 'left top', 'left bottom', 'start', 'start top', 'start bottom', 'right', 'right top', 'right bottom', 'end', 'end top'] | None", "description": "The placement of the popover relative to the action button.", "default": "'bottom start'"}, {"name": "is_open", "type": "bool | None", "description": "Whether the popover is open by default (controlled).", "default": "None"}, {"name": "default_open", "type": "bool | None", "description": "Whether the popover is open by default (uncontrolled).", "default": "None"}, {"name": "container_padding", "type": "float | None", "description": "The placement padding that should be applied between the element and its surrounding container.", "default": "None"}, {"name": "offset", "type": "float | None", "description": "The additional offset applied along the main axis between the element and its anchor element.", "default": "None"}, {"name": "cross_offset", "type": "float | None", "description": "The additional offset applied along the cross axis between the element and its anchor element.", "default": "None"}, {"name": "should_flip", "type": "bool | None", "description": "Whether the element should flip its orientation when there is insufficient room for it to render completely.", "default": "None"}, {"name": "on_open_change", "type": "Callable[[bool], None] | None", "description": "Handler that is called when the overlay's open state changes.", "default": "None"}, {"name": "flex", "type": "str | float | bool | None", "description": "When used in a flex layout, specifies how the element will grow or shrink to fit the space available.", "default": "None"}, {"name": "flex_grow", "type": "float | None", "description": "When used in a flex layout, specifies how the element will grow to fit the space available.", "default": "None"}, {"name": "flex_shrink", "type": "float | None", "description": "When used in a flex layout, specifies how the element will shrink to fit the space available.", "default": "None"}, {"name": "flex_basis", "type": "str | float | None", "description": "When used in a flex layout, specifies the initial main size of the element.", "default": "None"}, {"name": "align_self", "type": "Literal['auto', 'normal', 'start', 'end', 'center', 'flex-start', 'flex-end', 'self-start', 'self-end', 'stretch'] | None", "description": "Overrides the alignItems property of a flex or grid container.", "default": "None"}, {"name": "justify_self", "type": "Literal['auto', 'normal', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'center', 'left', 'right', 'stretch'] | None", "description": "Species how the element is justified inside a flex or grid container.", "default": "None"}, {"name": "order", "type": "int | None", "description": "The layout order for the element within a flex or grid container.", "default": "None"}, {"name": "grid_area", "type": "str | None", "description": "When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid.", "default": "None"}, {"name": "grid_row", "type": "str | None", "description": "When used in a grid layout, specifies the row the element should be placed in within the grid.", "default": "None"}, {"name": "grid_column", "type": "str | None", "description": "When used in a grid layout, specifies the column the element should be placed in within the grid.", "default": "None"}, {"name": "grid_row_start", "type": "str | None", "description": "When used in a grid layout, specifies the starting row to span within the grid.", "default": "None"}, {"name": "grid_row_end", "type": "str | None", "description": "When used in a grid layout, specifies the ending row to span within the grid.", "default": "None"}, {"name": "grid_column_start", "type": "str | None", "description": "When used in a grid layout, specifies the starting column to span within the grid.", "default": "None"}, {"name": "grid_column_end", "type": "str | None", "description": "When used in a grid layout, specifies the ending column to span within the grid.", "default": "None"}, {"name": "margin", "type": "str | float | None", "description": "The margin for all four sides of the element.", "default": "None"}, {"name": "margin_top", "type": "str | float | None", "description": "The margin for the top side of the element.", "default": "None"}, {"name": "margin_bottom", "type": "str | float | None", "description": "The margin for the bottom side of the element.", "default": "None"}, {"name": "margin_start", "type": "str | float | None", "description": "The margin for the logical start side of the element, depending on layout direction.", "default": "None"}, {"name": "margin_end", "type": "str | float | None", "description": "The margin for the logical end side of the element, depending on layout direction.", "default": "None"}, {"name": "margin_x", "type": "str | float | None", "description": "The margin for the left and right sides of the element.", "default": "None"}, {"name": "margin_y", "type": "str | float | None", "description": "The margin for the top and bottom sides of the element.", "default": "None"}, {"name": "width", "type": "str | float | None", "description": "The width of the element.", "default": "None"}, {"name": "height", "type": "str | float | None", "description": "The height of the element.", "default": "None"}, {"name": "min_width", "type": "str | float | None", "description": "The minimum width of the element.", "default": "None"}, {"name": "min_height", "type": "str | float | None", "description": "The minimum height of the element.", "default": "None"}, {"name": "max_width", "type": "str | float | None", "description": "The maximum width of the element.", "default": "None"}, {"name": "max_height", "type": "str | float | None", "description": "The maximum height of the element.", "default": "None"}, {"name": "position", "type": "Literal['static', 'relative', 'absolute', 'fixed', 'sticky'] | None", "description": "Specifies how the element is position.", "default": "None"}, {"name": "top", "type": "str | float | None", "description": "The top position of the element.", "default": "None"}, {"name": "bottom", "type": "str | float | None", "description": "The bottom position of the element.", "default": "None"}, {"name": "left", "type": "str | float | None", "description": "The left position of the element.", "default": "None"}, {"name": "right", "type": "str | float | None", "description": "The right position of the element.", "default": "None"}, {"name": "start", "type": "str | float | None", "description": "The logical start position of the element, depending on layout direction.", "default": "None"}, {"name": "end", "type": "str | float | None", "description": "The logical end position of the element, depending on layout direction.", "default": "None"}, {"name": "z_index", "type": "int | None", "description": "The stacking order for the element", "default": "None"}, {"name": "is_hidden", "type": "bool | None", "description": "Hides the element.", "default": "None"}, {"name": "id", "type": "str | None", "description": "The unique identifier of the element.", "default": "None"}, {"name": "aria_label", "type": "str | None", "description": "Defines a string value that labels the current element.", "default": "None"}, {"name": "aria_labelledby", "type": "str | None", "description": "Identifies the element (or elements) that labels the current element.", "default": "None"}, {"name": "aria_describedby", "type": "str | None", "description": "Identifies the element (or elements) that describes the object.", "default": "None"}, {"name": "aria_details", "type": "str | None", "description": "Identifies the element (or elements) that provide a detailed, extended description for the object.", "default": "None"}, {"name": "UNSAFE_class_name", "type": "str | None", "description": "Set the CSS className for the element. Only use as a last resort. Use style props instead.", "default": "None"}, {"name": "UNSAFE_style", "type": "Dict[str, Any] | None", "description": "Set the inline style for the element. Only use as a last resort. Use style props instead.", "default": "None"}, {"name": "key", "type": "str | None", "description": "A unique identifier used by React to render elements in a list.", "default": "None"}]}} />