Crayons

# Popover (fw-popover)

# Usage

Popover need two slots popover-trigger and popover-content. By default on clicking the trigger the content will be displayed. The props can be used to change the position of the content, width of the component and the distance between the trigger and the content.

Currency List
Show Code

# Controlling the width of the popover-content

If we want the content width to be different from the trigger then pass the sameWidth prop as false. Also the width of the content can be modified via the css variables as shown below.

Units
Show Code

# Keyboard navigation

Set the autoFocusOnContent prop as true to shift the focus to the content on popover open.

NOTE: Make sure content or trigger is focusable element, Or use the focus() or the setFocus() method on both to handle focus manually.

Payment Option
Show Code

The above event can be handled manually via the listeners.

Show Code

Even a complex dropdown can be created via popover. Below example contains two different fw-list-options inside a single fw-popover.

Premier Accounts
Sort Customers By
Sorting Order
Show Code

A simple dropdown button can be achieved as shown below.

Choose the sport
Show Code

# Properties

Property Attribute Description Type Default
autoFocusOnContent auto-focus-on-content Whether to focus on the element in popover-content slot on opening the dropdown. boolean false
boundary -- The area that the popup will be checked for overflow relative to. HTMLElement undefined
disableTransition disable-transition Option to disable the popover animation on hide and show. boolean false
distance distance Distance defines the distance between the popover trigger and the popover content along y-axis. string '0'
fallbackPlacements -- Alternative placement for popover if the default placement is not possible. [PopoverPlacementType] ['top']
hasBorder has-border Option to determine if popover-content has a border. boolean true
hideAfter hide-after Indicates the delay after which popover will be hidden. number 0
hideOnTab hide-on-tab Indicates whether popover contents should be hidden on pressing Tab. boolean true
hoist hoist Option to prevent the tooltip from being clipped when the component is placed inside a container with overflow: auto\|hidden\|scroll. boolean false
placement placement Placement of the popover content with respect to the popover trigger. "bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start" 'bottom'
sameWidth same-width Whether the popover-content width to be same as that of the popover-trigger. boolean true
showAfter show-after Indicates the delay after which popover will be shown. number 0
skidding skidding Skidding defines the distance between the popover trigger and the popover content along x-axis. string '0'
trigger trigger The trigger event on which the popover-content is displayed. The available options are 'click' | 'manual' | 'hover', in case of 'manual' no trigger event will be set. "click" \| "hover" \| "manual" 'click'
variant variant Variant defines the style of the popover-content. "date-picker" \| "select" 'select'

# Events

Event Description Type
fwHide Triggered whenever the popover contents is closed/hidden. CustomEvent<any>
fwShow Triggered whenever the popover contents is open/displayed. CustomEvent<any>

# Methods

# hide() => Promise<void>

# Returns

Type: Promise<void>

# show() => Promise<void>

# Returns

Type: Promise<void>

# CSS Custom Properties

Name Description
--fw-popover-border-radius border radius of the popover content.
--fw-popover-max-height Maximum height of the popover content.
--fw-popover-max-width Maximum width of the popover content.
--fw-popover-min-height Minimum height of the popover content.
--fw-popover-min-width Minimum width of the popover content.

# Dependencies

# Used by

# Graph

graph TD;
  fw-datepicker --> fw-popover
  fw-kebab-menu --> fw-popover
  fw-select --> fw-popover
  fw-tooltip --> fw-popover
  style fw-popover fill:#f9f,stroke:#333,stroke-width:4px

Built with ❤ at Freshworks

← Progress Loader (fw-progress-loader) →