Floating label used to clarify interface actions
CdrTooltip is a wrapper component that accepts a trigger element and tooltip content. When the trigger element is hovered or focused, the tooltip content is rendered. Event bindings between the trigger and the tooltip are set up automatically. The tooltip will dynamically update its
position property to ensure that it renders on screen, though this functionality can be disabled by setting
CdrTooltip can also be controlled programmatically using the
open prop. However, doing so means that you must implement certain behavior yourself:
position: relative and
open property should be toggled to true on
focus, and toggled to false on
aria-describedby property set to the ID of the CdrTooltip.
To ensure your usage of this component complies with accessibility guidelines you are responsible for the following:
id property on the CdrTooltip. The component will automatically link that
id to the trigger element.
trigger slot must be an actionable element such as a button.
This component complies with WCAG guidelines by:
aria-described-by on the trigger element to point to the id of the tooltip.
role="tooltip" to the tooltip content.
When an interface action is expressed solely through iconography, use a tooltip to clarify the action. Only interactive elements should trigger tooltips. The descriptions provided by tooltips should only contain one or two words: “close”, “clear”, or “save” are common examples.
Id for the CdrTooltip element. Required for accessibility.
Sets the position where the tooltip will render relative to the trigger element. Possible values: 'top' | 'bottom' | 'left' | 'right'
If set to `true`, tooltip will attempt to dynamically set it's position to ensure it renders within the visible browser window. If `false` the tooltip will always render in the provided `position`.
Adds a custom class to the tooltip content wrapper. Allows for overriding it's size, styling, etc.
Used to programmatically control the tooltip state. Does not need to be set if you are using the `trigger` slot. See the Custom Trigger examples for more info.
Find more information about using Slots in the article Installing Cedar.
Slot for CdrTooltip content.
Slot for the element that triggers the tooltip. Element should be a button and must be the first and only child of this slot. Event handlers are bound to this element automatically.
$emit event fired when tooltip is closed.
$emit event fired when tooltip is opened.