Tooltip

The Tooltip component provides contextual information using a lightweight custom element.

Ignix Lite tooltips support multiple positions, semantic intent variants, and keyboard accessibility without external dependencies.

---

Intent Variant

Preview

Code

<ix-tooltip content="Tooltip text">
  <button>Hover me</button>
</ix-tooltip>

<ix-tooltip content="Success tooltip" data-intent="success">
    <button>Success</button>
</ix-tooltip>

<ix-tooltip content="Danger tooltip" data-intent="danger">
    <button>Danger</button>
</ix-tooltip>

<ix-tooltip content="Warning tooltip" data-intent="warning">
    <button>Warning</button>
</ix-tooltip>

---

Positions

Preview

Code

<ix-tooltip content="Top" data-position="top">
  <button>Top</button>
</ix-tooltip>

<ix-tooltip content="Bottom" data-position="bottom">
  <button>Bottom</button>
</ix-tooltip>

<ix-tooltip content="Left" data-position="left">
  <button>Left</button>
</ix-tooltip>

<ix-tooltip content="Right" data-position="right">
  <button>Right</button>
</ix-tooltip>

Usage

Preview

Code

<ix-tooltip
  content="Copy install command"
  data-position="top"
>
  <button>
    Copy
  </button>
</ix-tooltip>

<ix-tooltip
  content="Delete project"
  data-intent="danger"
  data-position="bottom"
>
  <button data-intent="danger">
    Delete
  </button>
</ix-tooltip>

---

Attributes

Attribute	Type	Description
content	string	Tooltip text content
data-position	'top' | 'bottom' | 'left' | 'right'	Tooltip placement
data-intent	'success' | 'danger' | 'warning'	Semantic tooltip styling
tabindex	number	Set on the trigger element to enable keyboard focus (e.g. tabindex="0")
role	'tooltip'	Set automatically on <ix-tooltip> for accessibility