View Source SaladUI.Tooltip (SaladUI v1.0.0-beta.1)
Implementation of Tooltip component for SaladUI framework.
Tooltips provide additional information about an element when hovering over it.
Examples:
<.tooltip id="help-tooltip">
<.tooltip_trigger>
<.button variant="ghost" size="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-help-circle h-4 w-4">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<path d="M12 17h.01"></path>
</svg>
</.button>
</.tooltip_trigger>
<.tooltip_content side="top" align="center">
Need help? Click here for more information.
</.tooltip_content>
</.tooltip>
Summary
Functions
The main tooltip component that manages state and positioning.
The tooltip content that appears when triggered.
The trigger element that activates the tooltip when hovered.
Functions
The main tooltip component that manages state and positioning.
Options
:id
- Unique identifier for the tooltip (optional, auto-generated if not provided).:open-delay
- Delay in milliseconds before opening the tooltip. Defaults to150
.:close-delay
- Delay in milliseconds before closing the tooltip. Defaults to100
.:on-open
- Handler for tooltip open event.:on-close
- Handler for tooltip close event.:class
- Additional CSS classes.
Attributes
id
(:string
) - Defaults tonil
.open-delay
(:integer
) - Delay in milliseconds before opening the tooltip. Defaults to150
.close-delay
(:integer
) - Delay in milliseconds before closing the tooltip. Defaults to100
.on-open
(:any
) - Handler for tooltip open event. Defaults tonil
.on-close
(:any
) - Handler for tooltip close event. Defaults tonil
.class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The tooltip content that appears when triggered.
Options
:side
- Placement of the tooltip relative to the trigger (top, right, bottom, left). Defaults to"top"
.:align
- Alignment of the tooltip (start, center, end). Defaults to"center"
.:side-offset
- Distance from the trigger in pixels. Defaults to4
.:align-offset
- Offset along the alignment axis. Defaults to0
.:class
- Additional CSS classes.
Attributes
class
(:string
) - Defaults tonil
.side
(:string
) - Defaults to"top"
.align
(:string
) - Defaults to"center"
.side-offset
(:integer
) - Distance from the trigger in pixels. Defaults to8
.align-offset
(:integer
) - Offset along the alignment axis. Defaults to0
.- Global attributes are accepted.
Slots
inner_block
(required)
The trigger element that activates the tooltip when hovered.
If not provided, the first child of the tooltip will be used as trigger.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)