Skip to content

Add documentation for Popup component #4414

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mintlify wants to merge 1 commit into from
Closed

Add documentation for Popup component #4414

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions components/popup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
---
title: "Popup"
description: "Display contextual content in a floating overlay triggered by a click."
keywords: ["popup", "popover", "overlay", "click", "floating content"]
---

Use popups to display additional content in a floating overlay when users click on a trigger element. Unlike [tooltips](/components/tooltips) that appear on hover, popups require a click to open and can contain interactive content.

Check warning on line 7 in components/popup.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/popup.mdx#L7 

Use 'click' or 'click in' instead of 'click on'.

<Popup>
<PopupTrigger>Click to see more</PopupTrigger>
<PopupContent>
This content appears in a popup overlay.

You can include **formatted text**, links, and other components.
</PopupContent>
</Popup>

```mdx Popup example
<Popup>
<PopupTrigger>Click to see more</PopupTrigger>
<PopupContent>
This content appears in a popup overlay.

You can include **formatted text**, links, and other components.
</PopupContent>
</Popup>
```

## Structure

A popup consists of three components that work together:

- `<Popup>` - The wrapper component that manages state
- `<PopupTrigger>` - The clickable element that opens the popup
- `<PopupContent>` - The content displayed in the floating overlay

All three components are required and must be nested in this order.

Check warning on line 37 in components/popup.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/popup.mdx#L37 

In general, use active voice instead of passive voice ('are required').

Check warning on line 37 in components/popup.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/popup.mdx#L37 

In general, use active voice instead of passive voice ('be nested').

## Example with styled trigger

You can style the trigger text to make it more prominent:

<Popup>
<PopupTrigger>
<span className="text-primary underline cursor-pointer">Learn more about our pricing</span>
</PopupTrigger>
<PopupContent>
Our pricing is based on usage. Contact sales for enterprise pricing.

Check warning on line 48 in components/popup.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/popup.mdx#L48 

In general, use active voice instead of passive voice ('is based').
</PopupContent>
</Popup>

```mdx Styled trigger example
<Popup>
<PopupTrigger>
<span className="text-primary underline cursor-pointer">Learn more about our pricing</span>
</PopupTrigger>
<PopupContent>
Our pricing is based on usage. Contact sales for enterprise pricing.
</PopupContent>
</Popup>
```
1 change: 1 addition & 0 deletions docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@
"components/icons",
"components/mermaid-diagrams",
"components/panel",
"components/popup",
"components/prompt",
"components/responses",
"components/steps",
Expand Down
Loading