> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Popover

> Popover — CometChat documentation.

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](/web-elements/pop-over#placement)       | Group of constants representing the positioning or alignment of popover placement |
| hasToolTip      | boolean                                             | When set to true, displays the cursor                                             |
| popoverStyle    | [PopoverStyle](/web-elements/pop-over#popoverstyle) | Styling properties and values of the element                                      |
| showOnHover     | boolean                                             | When set to true, displays popover on hover                                       |
| debounceOnHover | number                                              | Adds debounce for showing popover on hover                                        |

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| boxShadow    | Sets shadow effects around the element                                                                                                                                               |

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements';//import the web component package.
    import { Placement } from '@cometchat/uikit-elements';

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