Star
Back to components

Tooltip

zyra-tooltip
OverlaysZyraTooltip

Component preview

Explore the available states and the real library behavior for this component.

Live previewZyraTooltip

zyra-tooltip Playground

Hover over elements to see tooltips. Control every input live.

Controls
position
text
maxWidth
trigger element
💡 Hover over the element in the preview to trigger the tooltip
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
Hover this text
Badge
Signals
Avatar
AK
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
Usage code
zyra-tooltip
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 {}
Adds context without clutterWorks well on icon-only actionsSupports compact UIs