Skip to main content
This element displays additional content or options in a small, overlay-like window. It appears on top of the current screen without requiring the user to navigate to a different page or screen.

​
Properties

NameTypeDescription
placementPlacementGroup of constants representing the positioning or alignment of popover placement
hasToolTipbooleanWhen set to true, displays the cursor
popoverStylePopoverStyleStyling properties and values of the element
showOnHoverbooleanWhen set to true, displays popover on hover
debounceOnHovernumberAdds debounce for showing popover on hover

​
Slots

NameDescription
contentPlaceholder to display the content for the trigger element
childrenPlaceholder to display the actual content that will be displayed when the popover is triggered.

​
Placement

NameDescription
topThe element appears above the trigger element, aligning with the top edge of the trigger.
leftThe element appears to the left of the trigger element, aligning with the left edge of the trigger.
rightThe element appears to the right of the trigger element, aligning with the right edge of the trigger.
bottomThe element appears below the trigger element, aligning with the bottom edge of the trigger.

​
PopoverStyle

Styling properties and values of the element
NameDescription
widthSets the width of the element
heightSets the height of the element
borderSets the border of the element
borderRadiusSets the borderRadius of the element
backgroundSets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
boxShadowSets shadow effects around the element

​
Usage

  • JavaScript
import '@cometchat/uikit-elements';//import the web component package.
import { Placement } from '@cometchat/uikit-elements';

<cometchat-popover placement="Placement.top" hasToolTip="true"></cometchat-popover>