The <luna-tooltip> component displays contextual tooltips with multiple placements and trigger options.
Paths
/lunadom/components/tooltip/tooltip.js /lunadom/components/button/button.js Placements
Directional tooltips that adapt to content position.
Interactions
Custom triggers and timed behaviors.
Click Trigger
Toggle Me
500ms Delay
Hover Me
Target ID (Fixed)
External Target
Customization
default - The trigger element (when not using the 'for' attribute).content - Rich HTML content for the tooltip body.content - Plain-text tooltip content (alternative to slot).for - ID of an external element to attach the tooltip to.placement - Where to show the tooltip (top, bottom, left, right). Defaults to 'top'.trigger - How the tooltip is triggered (hover, click). Defaults to 'hover'.delay - Delay in ms before showing. Defaults to 0.offset - Distance in px from the target. Defaults to 10.open - Present when the tooltip is visible.--luna-tooltip-bg - Background color. Defaults to rgba(20,20,20,0.95).--luna-tooltip-color - Text color. Defaults to #eee.--luna-tooltip-radius - Border radius. Defaults to 7px.--luna-tooltip-size - Font size. Defaults to 0.75rem.--luna-tooltip-padding - Inner padding. Defaults to 0.4rem 0.8rem.