Popover

Guidelines
React API Reference
Blazor API Reference

Popovers display additional content or options related to a specific UI element. Triggered by user actions like clicking or hovering, they offer extra information without moving the user away from their current context.

General Guidelines

Aspect	Best Practice
Usage	Reveal supplementary content, options, or help text related to a particular element upon user interaction (click or hover).
Visual Hierarchy	Position popovers near their triggering element (top, bottom, left, right). They should not obscure the entire page or content.
Behavior	Ensure popovers can be easily dismissed (e.g., by clicking outside or using a close button).
Psychological Impact	Popovers appear only when needed, providing contextual relevance without clutter. They encourage exploration and allow user-driven access.
Examples	Dropdown menus, tooltips with additional info, or action menus related to a specific item.

Format and Punctuation

Capitalization and Punctuation: Follow sentence case with proper punctuation. Keep text concise and grammatically correct.Active Voice and Clarity: Use active voice and avoid jargon. If complex terms are necessary, provide brief explanations.

Do’s and Don’ts

Do

Provide extra information or options that enhance the user’s current task.
Keep popover text short and easy to scan.

Don't

Use popovers for critical or essential information that must be seen immediately.
Overwhelm users with lengthy text or unnecessary details.

Import

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@strongtie/design-system/popover'

Usage

    export function PopoverDemo() {
    return (
        <Popover>
        <PopoverTrigger>Open</PopoverTrigger>
        <PopoverContent>
            This is a Popover. Place content for the popover here.
        </PopoverContent>
        </Popover>
    )
    }

`<Popover>`

The root container for the popover. This component wraps the Radix UI Popover Root component.

defaultOpen

boolean

The open state of the popover when it is initially rendered. Use when you do not need to control its open state.

open

boolean

The controlled open state of the popover. Must be used in conjunction with onOpenChange.

onOpenChange

(open: boolean) => void

Event handler called when the open state of the popover changes.

The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.

`<PopoverTrigger>`

The button that toggles the popover. By default, the StudsPopoverTrigger will render a button element. This component inherits props from the Radix UI Popover Trigger component.

asChild

boolean

default:"false"

Change the default rendered element for the one passed as a child, merging their props and behavior.

`<PopoverContent>`

The component that pops out when the popover is open. This component inherits props from the Radix UI Popover Content component.

asChild

boolean

default:"false"

Change the default rendered element for the one passed as a child, merging their props and behavior.

align

'start' | 'center' | 'end'

default:"'center'"

The preferred alignment against the trigger. May change when collisions occur.

alignOffset

number

default:"0"

An offset in pixels from the “start” or “end” alignment options.

side

'top' | 'right' | 'bottom' | 'left'

default:"'bottom'"

The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.

sideOffset

number

default:"4"

The distance in pixels from the trigger.

avoidCollisions

boolean

default:"true"

When true, overrides the side and align preferences to prevent collisions with boundary edges.

collisionBoundary

Element | null | Array<Element | null>

default:"[]"

The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.

collisionPadding

number | Partial<Record<Side, number>>

default:"0"

The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object

arrowPadding

number

default:"0"

The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.

sticky

'partial' | 'always'

default:"'partial'"

The sticky behavior on the align axis. “partial” will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst “always” will keep the content in the boundary regardless.

hideWhenDetached

boolean

default:"false"

Whether to hide the content when the trigger becomes fully occluded.

onOpenAutoFocus

(event: Event) => void

Event handler called when focus moves into the component after opening. Can be prevented by calling event.preventDefault.

onCloseAutoFocus

(event: Event) => void

Event handler called when focus moves to the trigger after closing. Can be prevented by calling event.preventDefault.

onEscapeKeyDown

(event: KeyboardEvent) => void

Event handler called when the escape key is down. Can be prevented by calling event.preventDefault.

onPointerDownOutside

(event: PointerDownOutsideEvent) => void

Event handler called when a pointer event occurs outside the bounds of the component. Can be prevented by calling event.preventDefault.

onFocusOutside

(event: FocusOutsideEvent) => void

Event handler called when focus moves outside the bounds of the component. Can be prevented by calling event.preventDefault.

onInteractOutside

(event: PointerDownOutsideEvent | FocusOutsideEvent) => void

Event handler called when an interaction happens outside the bounds of the component. Can be prevented by calling event.preventDefault.

forceMount

boolean

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Usage Examples

<Popover>
  <PopoverTrigger>Click me</PopoverTrigger>
  <PopoverContent>
    <div>
      <h4>Basic Popover</h4>
      <p>This is a simple popover with some content.</p>
    </div>
  </PopoverContent>
</Popover>

Styling Classes

The following CSS classes are applied by the Popover components:

popover-content – Main popover content container with positioning and styling

For more examples, visit our Storybook.

Example

<StudsButton @ref="button" Text="Open Popup" Click="HandleButtonClick" />
<StudsPopup @ref="popup">
    This is a popup. It can contain any content you want.
</StudsPopup>

@code {
    private StudsButton button;
    private StudsPopup popup;

    private async Task HandleButtonClick(MouseEventArgs args)
    {
        if (button != null && popup != null)
        {
            await popup.ToggleAsync(button.Element);
        }
    }
}

`StudsPopup` Parameters

Lazy

bool

default:"false"

If true, the popup content will only be rendered when the popup is open.

AutoFocusFirstElement

bool

default:"true"

Gets or sets a value indicating whether to focus the first focusable HTML element when the popup opens.

ChildContent

RenderFragment

Gets or sets the content to be displayed inside the popup.

PreventDefault

bool

default:"false"

If true, prevents the default mouse down behavior on the popup element.

Open

EventCallback

Gets or sets the callback that is invoked when the popup is opened.

EventCallback

Gets or sets the callback that is invoked when the popup is closed.

Methods

ToggleAsync(ElementReference target, bool disableSmartPosition = false)

Task

Opens or closes the popup relative to the target element. The disableSmartPosition parameter controls whether the popup should use smart positioning.

CloseAsync()

Task

Closes the popup.

CloseAsync(ElementReference target)

Task

Closes the popup associated with the specified target element.

Attributes

Dictionary<string, object>

Specifies additional custom attributes that will be rendered by the component.

MouseEnter

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse enters an item.

MouseLeave

EventCallback<ElementReference>

Gets or sets the callback that is invoked when the mouse leaves an item.

A callback that will be invoked when the user right-clicks the component. Commonly used to display a context menu.

Culture

CultureInfo

default:"CultureInfo.CurrentCulture"

Gets or sets the culture used to display localizable data (numbers, dates). Set by default to “CultureInfo.CurrentCulture”.

Style

string

Gets or sets the inline CSS style.

Visible

bool

default:"true"

Gets or sets a value indicating whether this “T:Studs.StudsComponent” is visible. Invisible components are not rendered.

Usage Examples

<StudsButton @ref="triggerButton" Text="Show Popover" Click="@HandleClick" />
<StudsPopover @ref="popover">
    <div style="padding: 1rem;">
        <h4>Basic Popover</h4>
        <p>This is a simple popover with some content.</p>
    </div>
</StudsPopover>

@code {
    private StudsButton triggerButton;
    private StudsPopover popover;

    private async Task HandleClick()
    {
        await popover.ToggleAsync(triggerButton.Element);
    }
}

Styling Classes

The following CSS classes are applied by the Popover component:

popup-content – Main popover container with positioning and styling

For more examples, visit the Storybook.

Getting Started

Foundations

Components

Integration Guides

Content

General Guidelines

Format and Punctuation

Do’s and Don’ts

Do

Don't

`<Popover>`

`<PopoverTrigger>`

`<PopoverContent>`

Usage Examples

Styling Classes

`StudsPopup` Parameters

Methods

Usage Examples

Styling Classes

Getting Started

Foundations

Components

Integration Guides

Content

​General Guidelines

​Format and Punctuation

​Do’s and Don’ts

Do

Don't

​<Popover>

​<PopoverTrigger>

​<PopoverContent>

​Usage Examples

​Styling Classes

​StudsPopup Parameters

​Methods

​Usage Examples

​Styling Classes

General Guidelines

Format and Punctuation

Do’s and Don’ts

`<Popover>`

`<PopoverTrigger>`

`<PopoverContent>`

Usage Examples

Styling Classes

`StudsPopup` Parameters

Methods

Usage Examples

Styling Classes