Small overlay used to display contextual information
CdrPopover is a wrapper component that accepts a trigger element and popover content. When the trigger element is clicked, the popover content is rendered. Event bindings between the trigger and the popover are set up automatically. The popover will dynamically update its position property to ensure that it renders on screen, though this functionality can be disabled by setting autoPosition to false.
CdrPopover 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 when the trigger element is clicked.
@closed event. In the example below we use
@closed="open = false" to change the value passed to the
aria-controls property set to the ID of the CdrPopover, and it's
aria-haspopup property set to "dialog".
To ensure your usage of this component complies with accessibility guidelines you are responsible for the following:
id property on the CdrPopover. 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-controls on the trigger element to point to the id of the tooltip.
aria-haspopup="dialog" on the trigger element.
aria-expanded on the popover content.
role="dialog" to the tooltip content.
esc key, or by clicking anywhere outside of the popover content.
A popover is a floating container useful for communicating small amounts of clarifying information. It's revealed through acting upon a trigger, like a button, but can also be used to preemptively bring attention to new interface features.
Use a popover when a subset of users require additional information.
Id for the CdrPopover element. Required for accessibility.
Sets the position where the popover will render relative to the trigger element. Possible values: 'top' | 'bottom' | 'left' | 'right'
If set to `true`, popover will attempt to dynamically set it's position to ensure it renders within the visible browser window. If `false` the popover will always render in the provided `position`.
Adds a custom class to the popover content wrapper. Allows for overriding it's size, styling, etc.
Used to programmatically control the popover 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 CdrPopover content.
Slot for the element that triggers the popover. 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.