Notice: When using the Coral.Popover in a scrollable content, make sure the set 'position: relative' on the container to enable the repositioning of Coral.Popover.

Content Padding

Use the u-coral-margin class to give margin to content zones.

This is especially useful when adding multiple paragraphs to a Popover.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet interdum convallis.

Vestibulum convallis lectus ut nulla commodo gravida. Suspendisse porta arcu sit amet purus sollicitudin id gravida mi gravida.

Show Markup

              

You can also use u-coral-padding class to give padding to the entire content container.

Note that this won't pay well with inner elements that use u-coral-margin, as you'll get double the spacing you intended.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet interdum convallis.
Show Markup

              

Content Separators

Use the coral-popover-separator component to create content separators.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet interdum convallis.

Vestibulum convallis lectus ut nulla commodo gravida. Suspendisse porta arcu sit amet purus sollicitudin id gravida mi gravida.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet interdum convallis.

Vestibulum convallis lectus ut nulla commodo gravida. Suspendisse porta arcu sit amet purus sollicitudin id gravida mi gravida.

Show Markup

              

Keyboard Controls

When the popover is visible, pressing the escape key will dismiss the top most popover.

Focus Behavior

When shown, the popover will focus on itself, showing no border. Pressing tab will move to the first focusable element, usually the close button.

When hidden, the popover will return focus to the element that was previously focused on the page.

Coral.Popover API

Constructor

JavaScript:

new Coral.Popover() or document.createElement('coral-popover')

HTML Tag:

<coral-popover>

Extends

Sub-components

Static Properties

Coral.Popover.closable {String}

Boolean enumeration for popover closable state.

Properties:

Name Type Value Description
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.

Coral.Popover.interaction {String}

Popover interaction values.

Properties:

Name Type Value Description
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.

Coral.Popover.variant {String}

Popover variants.

Properties:

Name Type Value Description
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.

Instance Properties

instance.alignAt {Coral.Overlay.align}

The point on the target we should anchor to when positioning.
Inherited From:
Default Value:
  • Coral.Overlay.align.RIGHT_CENTER
HTML Attribute:
  • alignat

instance.alignMy {Coral.Overlay.align}

The point on the overlay we should anchor from when positioning.
Default Value:
  • Coral.Overlay.align.LEFT_CENTER
HTML Attribute:
  • alignmy

instance.closable {Coral.Popover.closable}

Reflected
Whether the popover should have a close button.
Default Value:
  • Coral.Popover.closable.OFF
HTML Attribute:
  • closable

instance.collision {Coral.Overlay.collision}

The collision handling strategy when positioning the overlay relative to a target.
Inherited From:
Default Value:
  • Coral.Overlay.collision.FLIP_FIT
HTML Attribute:
  • collision

instance.content {HTMLElement}

The popover's content element.

instance.header {HTMLElement}

The popover's header element.

instance.icon {String}

The popover's icon.
Default Value:
  • ""
HTML Attribute:
  • icon

instance.interaction {Coral.Popover.interaction}

Whether the popover should show itself when the target is interacted with.
Default Value:
  • Coral.Popover.interaction.ON
HTML Attribute:
  • interaction

instance.offset {Number}

The distance the overlay should be from its target.
Default Value:
  • 5
HTML Attribute:
  • offset

instance.placement {Coral.Overlay.placement}

The placement of the overlay. This property sets Coral.Overlay#alignMy and Coral.Overlay#alignAt.
Default Value:
  • Coral.Overlay.placement.RIGHT
HTML Attribute:
  • placement

instance.returnFocus {Coral.mixin.overlay.returnFocus}

Whether to return focus to the previously focused element when closed.
Default Value:
  • Coral.mixin.overlay.returnFocus.ON
HTML Attribute:
  • returnfocus

instance.target {Coral.Overlay.target | HTMLElement | String}

The element the overlay should position relative to. It accepts values from Coral.Overlay.target, as well as a DOM element or a CSS selector. If a CSS selector is provided, the first matching element will be used. If a target is not specified, the overlay will not respect Coral.Overlay#alignMy, Coral.Overlay#alignAt, or Coral.Overlay#collision.
Inherited From:
Default Value:
  • null
HTML Attribute:
  • target

instance.trapFocus {Coral.mixin.overlay.trapFocus}

Whether to trap tabs and keep them within the overlay.
Default Value:
  • Coral.mixin.overlay.trapFocus.ON
HTML Attribute:
  • trapfocus

instance.variant {Coral.Dialog.variant}

The popover's variant.
Default Value:
  • Coral.Dialog.variant.DEFAULT
HTML Attribute:
  • variant

instance.within {HTMLElement | String}

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:
  • window

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
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:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
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
false Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

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. This is different from using jQuery's remove(), which is destructive in that it removes data and listeners.
Inherited From:

instance.reposition

Re-position the overlay if it's currently open.
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
The event name to trigger.
props Object Yes
Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
true Set to false to prevent the event from bubbling.
cancelable Boolean Yes
true Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:detached

Triggered when the component is detached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-component:ready

Triggerred when the component has been upgraded and is ready for use.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:

coral-overlay:positioned

Triggered after the overlay is positioned.
Callback Parameters:
Name Type Description
event Object

Event object.

Name Type Description
event.detail.vertical String The vertical position of the target relative to the overlay. top when the overlay is at the bottom, bottom when it is at the top.
event.detail.horizontal String The horizontal position of the target relative to the overlay. left when the overlay is to the right, right when it is to the left.
event.detail.target String The target's position.
event.detail.element String The overlay's position.
Inherited From: