# Popover
Popover displays additional information or actions in a lightweight overlay triggered by user interaction. It can contain interactive content such as buttons, links, and form controls.
**Category:** Components
**Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-popover--introduction
## Framework setup
### HTML / CDN
```html
```
### React
```bash
npm install ux4g-web-components
```
```jsx
import 'ux4g-web-components/styles.css';
import 'ux4g-web-components/design-system';
```
### Angular
Update `angular.json`:
```json
{
"styles": [
"node_modules/ux4g-web-components/styles/ux4g.css",
"src/styles.css"
],
"scripts": [
"node_modules/ux4g-web-components/dist/runtime/design-system.js"
]
}
```
## Code examples
The snippets below are extracted from the Storybook canvas for Popover. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup.
### 1. Customization — Customization
HTML:
```html
```
React:
```jsx
import React from 'react';
const PopoverExample1Demo = () => (
<>
{/* Variant: No Arrow */}
);
export default PopoverExample1Demo;
```
Angular:
```html
```
### 2. Introduction — Introduction
HTML:
```html
Components
Popover
Popover displays additional information or actions in a lightweight overlay triggered by user interaction. It can contain interactive content such as buttons, links, and form controls.
Implementation Showcase
Explore the key popover trigger patterns used most often across product surfaces, from directional placement to richer overlay content and minimal presentation tweaks.
Placement Coverage
Rich Content
Arrowless Variant
Metadata-First Trigger
CSS Class Reference
Key CSS classes used across popover triggers and content patterns. Click any class name to copy it.
Popover displays additional information or actions in a lightweight overlay triggered by user interaction. It can contain interactive content such as buttons, links, and form controls.
{/* Implementation Showcase */}
Implementation Showcase
Explore the key popover trigger patterns used most often across product surfaces, from directional placement to richer overlay content and minimal presentation tweaks.
{/* Placement Coverage */}
Placement Coverage
{/* Rich Content */}
Rich Content
{/* Arrowless Variant */}
Arrowless Variant
{/* Metadata-First Trigger */}
Metadata-First Trigger
{/* CSS Class Reference */}
CSS Class Reference
Key CSS classes used across popover triggers and content patterns. Click any class name to copy it.
Popover displays additional information or actions in a lightweight overlay triggered by user interaction. It can contain interactive content such as buttons, links, and form controls.
Implementation Showcase
Explore the key popover trigger patterns used most often across product surfaces, from directional placement to richer overlay content and minimal presentation tweaks.
Placement Coverage
Rich Content
Arrowless Variant
Metadata-First Trigger
CSS Class Reference
Key CSS classes used across popover triggers and content patterns. Click any class name to copy it.
Trigger Foundation
Class
Purpose
ux4g-btn
Base trigger button shell
ux4g-btn-primary
Prominent rich-content trigger
ux4g-btn-secondary
Alternative trigger emphasis
ux4g-btn-outline-primary
Neutral outline trigger treatment
Placement API
Attribute
Purpose
data-ux-toggle="popover"
Enables popover behavior on the trigger
data-ux-placement="top-start"
Align overlay above the trigger start edge
data-ux-placement="right"
Centers overlay on the right side
data-ux-placement="bottom-end"
Align overlay below the trigger end edge
Content Metadata
Attribute
Purpose
data-ux-title
Sets the popover heading
data-ux-subtitle
Adds supporting metadata under the title
data-ux-label
Shows a contextual badge-style label
data-ux-icon
Displays a leading icon inside the overlay
Advanced Content
Attribute
Purpose
data-ux-content
Defines the main body copy or HTML payload
data-ux-html="true"
Allows HTML rendering inside content
data-ux-action-html
Injects action markup such as overflow menus
data-ux-arrow="false"
Removes the default directional arrow
```
### 3. Placements — Placements
HTML:
```html
```
React:
```jsx
import React from 'react';
const PopoverExample3Demo = () => (
<>
{/* Placement: Top Start */}
{/* Placement: Top Center */}
{/* Placement: Top End */}
{/* Placement: Bottom Start */}
{/* Placement: Bottom Center */}
{/* Placement: Bottom End */}
{/* Placement: Left Start */}
{/* Placement: Left Center */}
{/* Placement: Left End */}
{/* Placement: Right Start */}
{/* Placement: Right Center */}
{/* Placement: Right End */}
);
export default PopoverExample3Demo;
```
Angular:
```html
```
### 4. Rich Content — Rich Content
HTML:
```html
```
React:
```jsx
import React from 'react';
const PopoverExample4DataUxActionHtml1 = `
`;
const PopoverExample4DataUxContent2 = `
A Popover is a small overlay UI component that appears floating above the page content, anchored to a trigger element (like a button).
Link
`;
const PopoverExample4Demo = () => (
<>
{/* Variant: Rich Content */}
);
export default PopoverExample4Demo;
```
Angular:
```html
```
## Accessibility notes
- Use semantic HTML and required ARIA attributes where the Storybook example shows them.
- Ensure visible focus indicators and keyboard operability.
- Test color contrast against WCAG 2.1 AA.