JavaScript:
-
new Coral.Popover()
or document.createElement('coral-popover')
HTML Tag:
-
<coral-popover>
-
Boolean enumeration for popover closable state.
-
Properties:
ON |
String
|
on
|
Show a close button on the popover and close the popover when clicked. |
OFF |
String
|
off
|
Do not show a close button. Elements with the coral-close attributes will still close the
popover. |
-
Popover interaction values.
-
Properties:
ON |
String
|
on
|
Show when the target is clicked and hide when clicked outside of the target and popover. |
OFF |
String
|
off
|
Do not show or hide automatically. |
-
Popover variants.
-
Properties:
DEFAULT |
String
|
default
|
A popover with the default, gray header and no icon. |
ERROR |
String
|
error
|
A popover with a red header and warning icon, indicating that an error has occurred. |
WARNING |
String
|
warning
|
A popover with an orange header and warning icon, notifying the user of something important. |
SUCCESS |
String
|
success
|
A popover with a green header and checkmark icon, indicates to the user that an operation was successful. |
HELP |
String
|
help
|
A popover with a blue header and question mark icon, provides the user with help. |
INFO |
String
|
info
|
A popover with a blue header and info icon, informs the user of non-critical information. |
-
The point on the target we should anchor to when positioning.
-
- Inherited From:
- Default Value:
- Coral.Overlay.align.CENTER_CENTER
- HTML Attribute:
-
The point on the overlay we should anchor from when positioning.
-
- Default Value:
- Coral.Overlay.align.LEFT_CENTER
- HTML Attribute:
-
Reflected
Whether the popover should have a close button.
-
- Default Value:
- Coral.Popover.closable.OFF
- HTML Attribute:
-
The collision handling strategy when positioning the overlay relative to a target.
-
- Inherited From:
- Default Value:
- Coral.Overlay.collision.FLIP_FIT
- HTML Attribute:
-
The popover's content element.
-
-
Focus behavior options.
-
Properties:
ON |
String
|
on
|
When the overlay is opened, it will be focused. |
OFF |
String
|
off
|
The overlay will not focus itself when opened. |
- Inherited From:
-
Whether to focus the overlay, when opened or not. By default the overlay itself will get the focus. It also
accepts an instance of HTMLElement or a selector like ':first-child' or 'button:last-of-type'. If the selector
returns multiple elements, it will focus the first element inside the overlay that matches the selector.
-
- Default Value:
- HTML Attribute:
-
The popover's header element.
-
-
Reflected
Whether this component is hidden or not.
-
- Inherited From:
- Default Value:
- HTML Attribute:
-
The popover's icon.
-
- Default Value:
- HTML Attribute:
-
Whether the popover should show itself when the target is interacted with.
-
- Default Value:
- Coral.Popover.interaction.ON
- HTML Attribute:
-
The distance the overlay should be from its target.
-
- Default Value:
- HTML Attribute:
-
Reflected
Whether this overlay is open or not.
-
- Default Value:
- HTML Attribute:
-
-
- Default Value:
- Coral.Overlay.placement.RIGHT
- HTML Attribute:
-
Whether to return focus to the previously focused element when closed.
-
- Default Value:
- Coral.mixin.overlay.returnFocus.ON
- HTML Attribute:
-
-
- Inherited From:
- Default Value:
- HTML Attribute:
-
Whether to trap tabs and keep them within the overlay.
-
- Default Value:
- Coral.mixin.overlay.trapFocus.ON
- HTML Attribute:
-
The popover's variant.
-
- Default Value:
- Coral.Dialog.variant.DEFAULT
- HTML Attribute:
-
The bounding element for the overlay. The overlay will be sized and positioned such that it is contained within
this element. It accepts both a DOM Element or a CSS selector. If a CSS selector is provided, the first matching
element will be used.
-
- Inherited From:
- Default Value:
-
Get the value of a property.
-
- Parameters:
-
property |
String
|
The name of the property to fetch the value of.
|
- Returns:
-
Property value.
{*}
- Inherited From:
-
Close the overlay.
-
- Returns:
-
-
Hide this component.
-
- Returns:
-
- Inherited From:
-
Remove an event listener.
-
- Parameters:
-
eventName |
String
|
No
|
The event name to stop listening for.
|
selector |
String
|
Yes
|
The selector that was used for event delegation.
|
func |
function
|
No
|
The function that was passed to on() .
|
useCapture |
Boolean
|
Yes
|
Only remove listeners with useCapture set to the value passed in.
|
- Returns:
-
- Inherited From:
-
Add an event listener.
-
- Parameters:
-
eventName |
String
|
No
|
|
The event name to listen for.
|
selector |
String
|
Yes
|
|
The selector to use for event delegation.
|
func |
function
|
No
|
|
The function that will be called when the event is triggered.
|
useCapture |
Boolean
|
Yes
|
|
Whether or not to listen during the capturing or bubbling phase.
|
- Returns:
-
- Inherited From:
-
Non-destructively remove this element. It can be re-added by simply appending it to the document again.
It will be garbage collected if there are no more references to it.
-
- Inherited From:
-
Re-position the overlay if it's currently open.
-
- Inherited From:
-
Set the element that focus should be returned to when the overlay is hidden.
-
- Parameters:
-
element |
HTMLElement
|
The element to return focus to. This must be a DOM element, not a jQuery object or selector.
|
- Returns:
-
-
Set a single property.
-
- Parameters:
-
property |
String
|
The name of the property to set.
|
value |
*
|
The value to set the property to.
|
silent |
Boolean
|
If true, events should not be triggered as a result of this set.
|
- Returns:
-
- Inherited From:
-
Show this component.
-
- Returns:
-
- Inherited From:
-
Open the overlay and set the z-index accordingly.
-
- Returns:
-
-
Trigger an event.
-
- Parameters:
-
eventName |
String
|
No
|
|
The event name to trigger.
|
props |
Object
|
Yes
|
|
Additional properties to make available to handlers as event.detail .
|
bubbles |
Boolean
|
Yes
|
|
Set to false to prevent the event from bubbling.
|
cancelable |
Boolean
|
Yes
|
|
Set to false to prevent the event from being cancelable.
|
- Returns:
-
CustomEvent object
{CustomEvent}
- Inherited From:
-
Triggerred before the component is closed with hide()
or instance.open = false
.
-
- Callback Parameters:
-
event |
Object
|
Event object.
event.preventDefault |
function
|
Call to stop the overlay from closing.
|
|
-
Triggerred before the component is opened with show()
or instance.open = true
.
-
- Callback Parameters:
-
event |
Object
|
Event object.
event.preventDefault |
function
|
Call to stop the overlay from opening.
|
|
-
Triggerred after the component is closed with hide()
or instance.open = false
-
- Callback Parameters:
-
event |
Object
|
Event object.
|
-
Triggerred after the overlay is opened with show()
or instance.open = true
-
- Callback Parameters:
-
event |
Object
|
Event object.
|
-
Triggered when the component is attached to the DOM.
-
- Callback Parameters:
-
event |
Object
|
Event object.
|
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
-
Triggered when the component is detached to the DOM.
-
- Callback Parameters:
-
event |
Object
|
Event object.
|
- Inherited From:
- Deprecated:
- since 1.14.0, use
MutationObserver
instead.
-
Triggerred when the component has been upgraded and is ready for use.
-
- Callback Parameters:
-
event |
Object
|
Event object.
|
- Inherited From:
- Deprecated:
- since 1.9.0, use
Coral.commons.ready()
instead.