Tremorx
Ui
Tooltip
Quick search...
⌘K
Storybook
Getting Started
Examples
Ui
Badge
Bold
Button
Callout
Card
Col
Divider
Flex
Grid
Italic
Legend
List
Menu
Metric
Select
Subtitle
Tab
Table
Text
Text Input
Textarea
Title
Tooltip
Visualizations
- 0.6.3
Getting Started
Getting Started
Core Components
Examples
Core Components
Table
Examples
Table
Badge
Ui
Badge
Bold
Ui
Bold
Button
Ui
Button
Callout
Ui
Callout
Card
Ui
Card
Col
Ui
Col
Divider
Ui
Divider
Flex
Ui
Flex
Grid
Ui
Grid
Italic
Ui
Italic
Legend
Ui
Legend
List
Ui
List
Menu
Ui
Menu
Metric
Ui
Metric
Select
Ui
Select
Subtitle
Ui
Subtitle
Tab
Ui
Tab
Table
Ui
Table
Text
Ui
Text
Text Input
Ui
Text Input
Textarea
Ui
Textarea
Title
Ui
Title
Tooltip
Ui
Tooltip
Area Chart
Visualizations
Area Chart
Bar Chart
Visualizations
Bar Chart
Donut Chart
Visualizations
Donut Chart
Line Chart
Visualizations
Line Chart
Tooltip
Stories
Playground
Source
Stories
Playground
Source
Renders a tooltip around the child element
Preview
Code
Hover Me!
Attributes
Event logs
Attribute
Type
Documentation
Default
Value
id
:string
"tooltip"
content
:any
The content of the tippy.
"My tooltip"
placement
:string
The tooltip placement in relation with the reference element
"top"
top
top-start
top-end
right
right-start
right-end
bottom
bottom-start
bottom-end
left
left-start
left-end
animation
:string
The transition animation of the tooltip
"fade"
fade
shift-away
shift-away-subtle
shift-away-extreme
shift-toward
shift-toward-subtle
shift-toward-extreme
scale
scale-subtle
scale-extreme
perspective
perspective-subtle
perspective-extreme
theme
:string
The theme of the tooltip
"translucent"
light
light-border
material
translucent
arrow
:boolean
Whether to display the tooltip arrow
true
arrow_type
:string
The arrow type displayed by the tooltip
"round"
sharp
round
size
:string
The size of the tooltip
"regular"
small
regular
large
touch
:boolean
Whether to allow touch events for the tooltip
true
rest
:global
Other attributes can be passed to tippy using data-tippy-* attributes
class
:string
inner_block
:slot
<.button size="lg">Hover Me!</.button>
Open a variation
Default
With light theme