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, while the footer prop is optional.
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.",
footer=ui.link("Download support logs"),
variant="info",
)
Placement
The contextual help component supports different placement options for when the popover’s positioning needs to be customized.
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.
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.
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.
| Parameters | Type | Default | Description |
|---|---|---|---|
| heading | Any | The heading of the popover. | |
| content | Any | The content of the popover. | |
| footer | Any | None | The footer of the popover. |
| variant | Literal['help', 'info'] | None | 'help' | Indicates whether contents are informative or provides helpful guidance. |
| placement | 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 | 'bottom start' | The placement of the popover relative to the action button. |
| is_open | bool | None | None | Whether the popover is open by default (controlled). |
| default_open | bool | None | None | Whether the popover is open by default (uncontrolled). |
| container_padding | float | None | None | The placement padding that should be applied between the element and its surrounding container. |
| offset | float | None | None | The additional offset applied along the main axis between the element and its anchor element. |
| cross_offset | float | None | None | The additional offset applied along the cross axis between the element and its anchor element. |
| should_flip | bool | None | None | Whether the element should flip its orientation when there is insufficient room for it to render completely. |
| key | str | None | None | A unique identifier used by React to render elements in a list. |
Content represents the primary content within a Spectrum container.
Returns: Element The rendered content element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | Any | The content to render within the container. | |
| key | str | None | None | A unique identifier used by React to render elements in a list. |
A footer for a document or section.
Returns: Element The rendered footer element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | None | bool | int | str | Element | List[NodeType] | The items to render within the footer. | |
| key | str | None | None | A unique identifier used by React to render elements in a list. |