# Popover (fw-popover)
Popover need two slots
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.
# 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.
# Keyboard navigation
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.
The above event can be handled manually via the listeners.
Even a complex dropdown can be created via popover. Below example contains two different fw-list-options inside a single fw-popover.
A simple dropdown button can be achieved as shown below.
| || ||Whether to focus on the element in popover-content slot on opening the dropdown.|| |
| ||--||The area that the popup will be checked for overflow relative to.|| |
| || ||Option to disable the popover animation on hide and show.|| |
| || ||Distance defines the distance between the popover trigger and the popover content along y-axis.|| |
| ||--||Alternative placement for popover if the default placement is not possible.|| |
| || ||Option to determine if popover-content has a border.|| |
| || ||Indicates whether popover contents should be hidden on pressing Tab.|| |
| || ||Option to prevent the tooltip from being clipped when the component is placed inside a container with || |
| || ||Placement of the popover content with respect to the popover trigger.|| |
| || ||Whether the popover-content width to be same as that of the popover-trigger.|| |
| || ||Skidding defines the distance between the popover trigger and the popover content along x-axis.|| |
| || ||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.|| |
| || ||Variant defines the style of the popover-content.|| |
| ||Triggered whenever the popover contents is closed/hidden.|
| ||Triggered whenever the popover contents is open/displayed.|
hide() => Promise<void>
show() => Promise<void>
# CSS Custom Properties
| ||border radius of the popover content.|
| ||Maximum height of the popover content.|
| ||Maximum width of the popover content.|
| ||Minimum height of the popover content.|
| ||Minimum width of the popover content.|
# Used by
graph TD; fw-datepicker --> fw-popover fw-select --> fw-popover fw-tooltip --> fw-popover style fw-popover fill:#f9f,stroke:#333,stroke-width:4px
Built with ❤ at Freshworks