Back to componentszyra-tooltip
Tooltip
Helpful hover and focus details for dense controls, icon actions, and space-constrained interfaces.
Component preview
Explore the available states and the real library behavior for this component.
zyra-tooltip Playground
Hover over elements to see tooltips. Control every input live.
Controls
position
maxWidth
trigger
tooltip text
Preview — hover the element
Generated Code
<zyra-tooltip
text="This is a tooltip!"
>
<!-- your trigger element -->
<zyra-button variant="primary">Hover me</zyra-button>
</zyra-tooltip>All Positions
position="top"
position="bottom"
position="left"
position="right"
Different Trigger Elements
Button
Icon
Text
Badge
Avatar
Disabled btn
Text Length & Max Width
Short text
Medium text
Long text
maxWidth="120px"
Real World Examples
Toolbar Actions
Form Field Hints
API Key ?
sk-••••••••••••••••
Webhook URL ?
https://example.com/hook
Status Details
API ServerOnline
DatabaseMaintenance
CDNDegraded
Copy-paste example
Drop this into your Angular standalone component and it works out of the box.
import { Component } from '@angular/core';
import { ZyraButton, ZyraTooltip } from 'zyra-ng-ui';
@Component({
selector: 'app-demo-tooltip',
standalone: true,
imports: [ZyraButton, ZyraTooltip],
template: `
<zyra-tooltip text="Copy component code" position="top">
<zyra-button variant="secondary" size="sm">
Hover me
</zyra-button>
</zyra-tooltip>
`,
})
export class DemoTooltipComponent {}
Variants
All the visual modes and states available for this component.
topTooltip appears above the trigger element
bottomTooltip appears below the trigger element
leftTooltip appears to the left
rightTooltip appears to the right
API
All inputs and configuration options for zyra-tooltip.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | - | Tooltip label text |
position | 'top' | 'bottom' | 'left' | 'right' | 'top' | Preferred placement relative to the trigger |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Tooltip is linked to its trigger via aria-describedby for screen reader announcement
- Tooltip renders with role="tooltip" - the trigger element must be focusable
- Tooltip is shown on both hover and focus so keyboard users get the same information
- Never put interactive content inside a tooltip