Tooltip

Types

Hover tooltip (default)

Toggle tooltip

Themes

Dark (default)

Light

Positions

Auto (default)

Top

Top-right

Top-left

Bottom

Bottom-right

Bottom-left

Delay

Basic usage

Delay: 1000ms

Creating tooltips with method

Default config

Basic usage

The definition provides inline additional help or defines a term. It may be used on the label of a UI element, on a word embedded in a paragraph, or in compact spaces such as data tables where icons clutter the UI. You can use definition tooltips on headers, body copy, or labels.

With scrollTo action

The Opera Design System is powerful, extensible, and feature-packed frontend toolkit. Build and customize with tailwindcss, utilize prebuilt UI system and components, and bring projects to life with powerful JavaScript plugins.

With openNewTab action