Pop Over

Overview

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

Name	Type	Description
placement	Placement	Group of constants representing the positioning or alignment of popover placement
hasToolTip	boolean	When set to true, displays the cursor
popoverStyle	PopoverStyle	Styling properties and values of the element

Slots

Name	Description
content	Placeholder to display the content for the trigger element
children	Placeholder to display the actual content that will be displayed when the popover is triggered.

Placement

Name	Description
top	The element appears above the trigger element, aligning with the top edge of the trigger.
left	The element appears to the left of the trigger element, aligning with the left edge of the trigger.
right	The element appears to the right of the trigger element, aligning with the right edge of the trigger.
bottom	The element appears below the trigger element, aligning with the bottom edge of the trigger.

PopoverStyle

Styling properties and values of the element

Name	Description
width	Sets the width of the element
height	Sets the height of the element
border	Sets the border of the element
borderRadius	Sets the borderRadius of the element
background	Sets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link
boxShadow	Sets shadow effects around the element

Usage

HTML

<cometchat-popover
[placement]="placement" 
[hasToolTip]="true"
></cometchat-popover>

Javascript

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

placement = Placement.top;