A tooltip is a hint for sighted users that appears when an element is hovered or receives keyboard focus. Tooltips are helpful in visually dense interfaces to provide additional context or information about an action or element.
Lustre.Ui.Tooltip.view []
(Lustre.Ui.Tooltip.popover [] [ Html.text "Tooltip content" ])
(Lustre.Ui.Tooltip.trigger [] [ Html.text "Hover me" ])tooltip.view is the root container for both the trigger element
and its popopver.
The tooltip.popover contains the content that should be
revealed on hover.
The tooltip.trigger contains the element that will trigger
the popover when hovered or focused.
Tooltips are supplementary aides for sighted users, and have some important accessibility concerns that must be accounted for. For non-sighted users, tooltips are never a substitute for accessible labels as the popover content is not accessible to screen readers. Additionally, users of touch devices may not be able to reliably trigger the tooltip. Because of this, the content rendered inside a tooltip's popover is considered inert and must not be interactive.
The content inside the tooltip's popover is marked as inert and should not contain interactive elements like links or buttons.
You can use these recipes as starting points for tooltips. Copy and paste them into your apps and adapt them as needed!
Lustre.Ui.Tooltip.view []
(Lustre.Ui.Tooltip.popover [] [ Html.text "Tooltip content" ])
(Lustre.Ui.Tooltip.trigger [] [ Html.text "Hover me" ])Lustre.Ui.Tooltip.view [ Lustre.Ui.Tooltip.delay 0 ]
(Lustre.Ui.Tooltip.popover [] [ Html.text "Tooltip content" ])
(Lustre.Ui.Tooltip.trigger [] [ Html.text "Hover me" ])Lustre.Ui.Tooltip.view []
(Lustre.Ui.Tooltip.popover
[ Lustre.Ui.Tooltip.side Right, Lustre.Ui.Tooltip.align End ]
[ Html.text "Tooltip content" ]
)
(Lustre.Ui.Tooltip.trigger [] [ Html.text "Hover me" ])The side of the trigger element that the tooltip popover should appear on.
Used with the side attribute.
The root tooltip element is a container for both the trigger and popover content.
<lustre-tooltip>This element has a default display of contents and does not affect layout
on its own. Prefer styling the trigger and popover elements directly where
possible.
The tooltip popover contains the content that is revealed when the associated trigger is hovered or receives keyboard focus.
<lustre-tooltip-popover>align, default_open, offset,
open, side.
This element has a default display of inline when open and none when
closed.
The following CSS custom states can be used to style this element:
:state(open) is applied when the popover is visible.:state(top), :state(right), :state(bottom), :state(left) reflect
the current placement side.:state(start) and :state(end) reflect the current alignment.The following CSS custom properties are set on this element and can be used to position the popover or style its children:
--tooltip-popover-x--tooltip-popover-yThe content inside the tooltip popover is marked as inert and must not contain any interactive elements such as links or buttons.
The following attributes must not be set manually on the popover, as these are managed by the component and are necessary for accessibility:
popoverroleThe tooltip trigger wraps the element that will show and hide the popover when hovered or focused.
<lustre-tooltip-trigger>This element has a default display of inline.
The following CSS custom states can be used to style this element:
:state(open) is applied when the associated tooltip popover is visible.The following attributes must not be set manually on the trigger, as these are managed by the component and are necessary for accessibility:
aria-describedbySets the alignment of the tooltip popover relative to the trigger element
along the axis perpendicular to the placement side. Defaults to
Centre.
Set whether the tooltip popover is open by default when first rendered in an uncontrolled tooltip.
Note: an uncontrolled component is responsible for managing its own state and subsequent changes to
default_openwill not be reflected in the component after the initial render.To control the tooltip's open state from your application, use the
openattribute instead.
Sets the delay in milliseconds before the tooltip popover is shown after the
trigger is hovered. Defaults to 50. Set to 0 to show the tooltip
immediately on hover.
Sets the distance in pixels between the trigger element and the tooltip
popover. The offset is applied along the placement side, so if the popover is
placed on the Left of the trigger, an offset of 10 will move the
popover 10 pixels to the left of the trigger element.
Set the open state of the tooltip popover, making it controlled by your application.
Note: in a controlled component, the state is managed by your application. Set this to
Trueto force the popover to remain visible regardless of user interaction.To set whether the tooltip is initially open when first rendered, consider using the
default_openattribute instead.
Sets which side of the trigger element the tooltip popover should appear on.
Defaults to Top.
An event emitted by the tooltip when its open state changes. In a controlled tooltip, this event should be used to update your application state with the new open state. Your application may ignore this event to prevent the open state of the tooltip from changing.
In an uncontrolled tooltip, this event can be used to respond to changes in the tooltip's open state.
An event emitted by the trigger when the tooltip is activated, i.e. the trigger is hovered or focused.
Note: like other DOM events, this event bubbles and can be listened for on the containing tooltip.
An event emitted by the trigger when the tooltip is dismissed, i.e. the trigger loses hover or focus.
Note: like other DOM events, this event bubbles and can be listened for on the containing tooltip.
The alignment of the tooltip popover relative to the trigger element. Used with the
alignattribute.