diff --git a/components/lib/overlaypanel/OverlayPanel.d.ts b/components/lib/overlaypanel/OverlayPanel.d.ts
old mode 100755
new mode 100644
index f50ab38b7..fe0bd8354
--- a/components/lib/overlaypanel/OverlayPanel.d.ts
+++ b/components/lib/overlaypanel/OverlayPanel.d.ts
@@ -2,224 +2,66 @@
  *
  * OverlayPanel is a container component positioned as connected to its target.
  *
- * [Live Demo](https://primevue.org/overlaypanel)
+ * [Live Demo](https://primevue.org/popover)
  *
  * @module overlaypanel
  *
  */
-import { TransitionProps, VNode } from 'vue';
-import { ComponentHooks } from '../basecomponent';
-import { PassThroughOptions } from '../passthrough';
-import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
-
-export declare type OverlayPanelPassThroughOptionType = OverlayPanelPassThroughAttributes | ((options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes | string) | string | null | undefined;
-
-export declare type OverlayPanelPassThroughTransitionType = TransitionProps | ((options: OverlayPanelPassThroughMethodOptions) => TransitionProps) | undefined;
+import 'vue';
+import * as Popover from '../popover';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface OverlayPanelPassThroughMethodOptions {
-    /**
-     * Defines instance.
-     */
-    instance: any;
-    /**
-     * Defines valid properties.
-     */
-    props: OverlayPanelProps;
-    /**
-     * Defines current inline state.
-     */
-    state: OverlayPanelState;
-    /**
-     * Defines valid attributes.
-     */
-    attrs: any;
-    /**
-     * Defines parent options.
-     */
-    parent: any;
-    /**
-     * Defines passthrough(pt) options in global config.
-     */
-    global: object | undefined;
-}
+export interface OverlayPanelPassThroughMethodOptions extends Popover.PopoverPassThroughMethodOptions {}
 
 /**
  * Custom passthrough(pt) options.
  * @see {@link OverlayPanelProps.pt}
  */
-export interface OverlayPanelPassThroughOptions {
-    /**
-     * Used to pass attributes to the root's DOM element.
-     */
-    root?: OverlayPanelPassThroughOptionType;
-    /**
-     * Used to pass attributes to the content's DOM element.
-     */
-    content?: OverlayPanelPassThroughOptionType;
-    /**
-     * Used to manage all lifecycle hooks.
-     * @see {@link BaseComponent.ComponentHooks}
-     */
-    hooks?: ComponentHooks;
-    /**
-     * Used to control Vue Transition API.
-     */
-    transition?: OverlayPanelPassThroughTransitionType;
-}
+export interface OverlayPanelPassThroughOptions extends Popover.PopoverPassThroughOptions {}
 
 /**
  * Custom passthrough attributes for each DOM elements
  */
-export interface OverlayPanelPassThroughAttributes {
+export interface OverlayPanelPassThroughAttributes extends Popover.PopoverPassThroughAttributes {
     [key: string]: any;
 }
 
 /**
  * Defines current inline state in OverlayPanel component.
  */
-export interface OverlayPanelState {
-    /**
-     * Current visible state as a boolean.
-     * @defaultValue false
-     */
-    visible: boolean;
-}
+export interface OverlayPanelState extends Popover.PopoverState {}
 
 /**
  * OverlayPanel breakpoint metadata.
  */
-export interface OverlayPanelBreakpoints {
-    /**
-     * Breakpoint for responsive mode.
-     *
-     * Example:
-     *
-     * <OverlayPanel :breakpoints="{'960px': '75vw', '640px': '100vw'}" ... />
-     *
-     * Result:
-     *
-     * @media screen and (max-width: ${breakpoint[key]}) {
-     *      .p-overlaypanel[attributeSelector] {
-     *          width: ${breakpoint[value]} !important;
-     *      }
-     * }
-     */
-    [key: string]: string;
-}
+export interface OverlayPanelBreakpoints extends Popover.PopoverBreakpoints {}
 
 /**
  * Defines valid properties in OverlayPanel component.
  */
-export interface OverlayPanelProps {
-    /**
-     * Enables to hide the overlay when outside is clicked.
-     * @defaultValue true
-     */
-    dismissable?: boolean;
-    /**
-     * A valid query selector or an HTMLElement to specify where the overlay gets attached.
-     * @defaultValue body
-     */
-    appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
-    /**
-     * Base zIndex value to use in layering.
-     * @defaultValue 0
-     */
-    baseZIndex?: number;
-    /**
-     * Whether to automatically manage layering.
-     * @defaultValue true
-     */
-    autoZIndex?: boolean;
-    /**
-     * Object literal to define widths per screen size.
-     */
-    breakpoints?: OverlayPanelBreakpoints;
-    /**
-     * It generates scoped CSS variables using design tokens for the component.
-     */
-    dt?: DesignToken<any>;
-    /**
-     * Used to pass attributes to DOM elements inside the component.
-     * @type {OverlayPanelPassThroughOptions}
-     */
-    pt?: PassThrough<OverlayPanelPassThroughOptions>;
-    /**
-     * Used to configure passthrough(pt) options of the component.
-     * @type {PassThroughOptions}
-     */
-    ptOptions?: PassThroughOptions;
-    /**
-     * When enabled, it removes component related styles in the core.
-     * @defaultValue false
-     */
-    unstyled?: boolean;
-    /**
-     * Specifies if pressing escape key should hide the dialog.
-     * @defaultValue true
-     */
-    closeOnEscape?: boolean | undefined;
-}
+export interface OverlayPanelProps extends Popover.PopoverProps {}
 
 /**
  * Defines valid slots in OverlayPanel component.
  */
-export interface OverlayPanelSlots {
-    /**
-     * Custom content template.
-     */
-    default(): VNode[];
-    /**
-     * Custom container slot.
-     * @param {Object} scope - container slot's params.
-     */
-    container(scope: {
-        /**
-         * Close overlay panel function.
-         * @deprecated since v3.39.0. Use 'closeCallback' property instead.
-         */
-        onClose: () => void;
-        /**
-         * Close button keydown function.
-         * @param {Event} event - Browser event
-         * @deprecated since v3.39.0. Use 'keydownCallback' property instead.
-         */
-        onKeydown: (event: Event) => void;
-        /**
-         * Close overlay panel function.
-         */
-        closeCallback: () => void;
-        /**
-         * Close button keydown function.
-         * @param {Event} event - Browser event
-         */
-        keydownCallback: (event: Event) => void;
-    }): VNode[];
-}
+export interface OverlayPanelSlots extends Popover.PopoverSlots {}
 
 /**
  * Defines valid emits in OverlayPanel component.
  */
-export interface OverlayPanelEmits {
-    /**
-     * Callback to invoke when the overlay is shown.
-     */
-    show(): void;
-    /**
-     * Callback to invoke when the overlay is hidden.
-     */
-    hide(): void;
-}
+export interface OverlayPanelEmits extends Popover.PopoverEmits {}
 
 /**
+ * @deprecated Deprecated since v4. Use Popover component instead.
+ *
  * **PrimeVue - OverlayPanel**
  *
  * _OverlayPanel, also known as Popover, is a container component that can overlay other components on page._
  *
- * [Live Demo](https://www.primevue.org/overlaypanel/)
+ * [Live Demo](https://www.primevue.org/popover/)
  * --- ---
  * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *
diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue
old mode 100755
new mode 100644
index 846fb1ac7..961c551c3
--- a/components/lib/overlaypanel/OverlayPanel.vue
+++ b/components/lib/overlaypanel/OverlayPanel.vue
@@ -1,314 +1,11 @@
-<template>
-    <Portal :appendTo="appendTo">
-        <transition name="p-popover" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
-            <div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :aria-modal="visible" @click="onOverlayClick" :class="cx('root')" v-bind="ptmi('root')">
-                <slot v-if="$slots.container" name="container" :onClose="hide" :onKeydown="(event) => onButtonKeydown(event)" :closeCallback="hide" :keydownCallback="(event) => onButtonKeydown(event)"></slot>
-                <template v-else>
-                    <div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
-                        <slot></slot>
-                    </div>
-                </template>
-            </div>
-        </transition>
-    </Portal>
-</template>
-
 <script>
-import FocusTrap from 'primevue/focustrap';
-import OverlayEventBus from 'primevue/overlayeventbus';
-import Portal from 'primevue/portal';
-import Ripple from 'primevue/ripple';
-import { $dt } from 'primevue/themes';
-import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
-import BaseOverlayPanel from './BaseOverlayPanel.vue';
+import Popover from 'primevue/popover';
 
 export default {
     name: 'OverlayPanel',
-    extends: BaseOverlayPanel,
-    inheritAttrs: false,
-    emits: ['show', 'hide'],
-    data() {
-        return {
-            visible: false
-        };
-    },
-    watch: {
-        dismissable: {
-            immediate: true,
-            handler(newValue) {
-                if (newValue) {
-                    this.bindOutsideClickListener();
-                } else {
-                    this.unbindOutsideClickListener();
-                }
-            }
-        }
-    },
-    selfClick: false,
-    target: null,
-    eventTarget: null,
-    outsideClickListener: null,
-    scrollHandler: null,
-    resizeListener: null,
-    container: null,
-    styleElement: null,
-    overlayEventListener: null,
-    documentKeydownListener: null,
-    beforeUnmount() {
-        if (this.dismissable) {
-            this.unbindOutsideClickListener();
-        }
-
-        if (this.scrollHandler) {
-            this.scrollHandler.destroy();
-            this.scrollHandler = null;
-        }
-
-        this.destroyStyle();
-        this.unbindResizeListener();
-        this.target = null;
-
-        if (this.container && this.autoZIndex) {
-            ZIndexUtils.clear(this.container);
-        }
-
-        if (this.overlayEventListener) {
-            OverlayEventBus.off('overlay-click', this.overlayEventListener);
-            this.overlayEventListener = null;
-        }
-
-        this.container = null;
-    },
+    extends: Popover,
     mounted() {
-        if (this.breakpoints) {
-            this.createStyle();
-        }
-    },
-    methods: {
-        toggle(event, target) {
-            if (this.visible) this.hide();
-            else this.show(event, target);
-        },
-        show(event, target) {
-            this.visible = true;
-            this.eventTarget = event.currentTarget;
-            this.target = target || event.currentTarget;
-        },
-        hide() {
-            this.visible = false;
-        },
-        onContentClick() {
-            this.selfClick = true;
-        },
-        onEnter(el) {
-            this.container.setAttribute(this.attributeSelector, '');
-            DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
-            this.alignOverlay();
-
-            if (this.dismissable) {
-                this.bindOutsideClickListener();
-            }
-
-            this.bindScrollListener();
-            this.bindResizeListener();
-
-            if (this.autoZIndex) {
-                ZIndexUtils.set('overlay', el, this.baseZIndex + this.$primevue.config.zIndex.overlay);
-            }
-
-            this.overlayEventListener = (e) => {
-                if (this.container.contains(e.target)) {
-                    this.selfClick = true;
-                }
-            };
-
-            this.focus();
-            OverlayEventBus.on('overlay-click', this.overlayEventListener);
-            this.$emit('show');
-
-            if (this.closeOnEscape) {
-                this.bindDocumentKeyDownListener();
-            }
-        },
-        onLeave() {
-            this.unbindOutsideClickListener();
-            this.unbindScrollListener();
-            this.unbindResizeListener();
-            this.unbindDocumentKeyDownListener();
-            OverlayEventBus.off('overlay-click', this.overlayEventListener);
-            this.overlayEventListener = null;
-            this.$emit('hide');
-        },
-        onAfterLeave(el) {
-            if (this.autoZIndex) {
-                ZIndexUtils.clear(el);
-            }
-        },
-        alignOverlay() {
-            DomHandler.absolutePosition(this.container, this.target, false);
-
-            const containerOffset = DomHandler.getOffset(this.container);
-            const targetOffset = DomHandler.getOffset(this.target);
-            let arrowLeft = 0;
-
-            if (containerOffset.left < targetOffset.left) {
-                arrowLeft = targetOffset.left - containerOffset.left;
-            }
-
-            this.container.style.setProperty($dt('overlay.arrow.left').name, `${arrowLeft}px`);
-
-            if (containerOffset.top < targetOffset.top) {
-                this.container.setAttribute('data-p-overlaypanel-flipped', 'true');
-                !this.isUnstyled && DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
-            }
-        },
-        onContentKeydown(event) {
-            if (event.code === 'Escape' && this.closeOnEscape) {
-                this.hide();
-                DomHandler.focus(this.target);
-            }
-        },
-        onButtonKeydown(event) {
-            switch (event.code) {
-                case 'ArrowDown':
-                case 'ArrowUp':
-                case 'ArrowLeft':
-                case 'ArrowRight':
-                    event.preventDefault();
-
-                default:
-                    break;
-            }
-        },
-        focus() {
-            let focusTarget = this.container.querySelector('[autofocus]');
-
-            if (focusTarget) {
-                focusTarget.focus();
-            }
-        },
-        onKeyDown(event) {
-            if (event.code === 'Escape' && this.closeOnEscape) {
-                this.visible = false;
-            }
-        },
-        bindDocumentKeyDownListener() {
-            if (!this.documentKeydownListener) {
-                this.documentKeydownListener = this.onKeyDown.bind(this);
-                window.document.addEventListener('keydown', this.documentKeydownListener);
-            }
-        },
-        unbindDocumentKeyDownListener() {
-            if (this.documentKeydownListener) {
-                window.document.removeEventListener('keydown', this.documentKeydownListener);
-                this.documentKeydownListener = null;
-            }
-        },
-        bindOutsideClickListener() {
-            if (!this.outsideClickListener && DomHandler.isClient()) {
-                this.outsideClickListener = (event) => {
-                    if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
-                        this.visible = false;
-                    }
-
-                    this.selfClick = false;
-                };
-
-                document.addEventListener('click', this.outsideClickListener);
-            }
-        },
-        unbindOutsideClickListener() {
-            if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener);
-                this.outsideClickListener = null;
-                this.selfClick = false;
-            }
-        },
-        bindScrollListener() {
-            if (!this.scrollHandler) {
-                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
-                    if (this.visible) {
-                        this.visible = false;
-                    }
-                });
-            }
-
-            this.scrollHandler.bindScrollListener();
-        },
-        unbindScrollListener() {
-            if (this.scrollHandler) {
-                this.scrollHandler.unbindScrollListener();
-            }
-        },
-        bindResizeListener() {
-            if (!this.resizeListener) {
-                this.resizeListener = () => {
-                    if (this.visible && !DomHandler.isTouchDevice()) {
-                        this.visible = false;
-                    }
-                };
-
-                window.addEventListener('resize', this.resizeListener);
-            }
-        },
-        unbindResizeListener() {
-            if (this.resizeListener) {
-                window.removeEventListener('resize', this.resizeListener);
-                this.resizeListener = null;
-            }
-        },
-        isTargetClicked(event) {
-            return this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target));
-        },
-        containerRef(el) {
-            this.container = el;
-        },
-        createStyle() {
-            if (!this.styleElement && !this.isUnstyled) {
-                this.styleElement = document.createElement('style');
-                this.styleElement.type = 'text/css';
-                DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
-                document.head.appendChild(this.styleElement);
-
-                let innerHTML = '';
-
-                for (let breakpoint in this.breakpoints) {
-                    innerHTML += `
-                        @media screen and (max-width: ${breakpoint}) {
-                            .p-overlaypanel[${this.attributeSelector}] {
-                                width: ${this.breakpoints[breakpoint]} !important;
-                            }
-                        }
-                    `;
-                }
-
-                this.styleElement.innerHTML = innerHTML;
-            }
-        },
-        destroyStyle() {
-            if (this.styleElement) {
-                document.head.removeChild(this.styleElement);
-                this.styleElement = null;
-            }
-        },
-        onOverlayClick(event) {
-            OverlayEventBus.emit('overlay-click', {
-                originalEvent: event,
-                target: this.target
-            });
-        }
-    },
-    computed: {
-        attributeSelector() {
-            return UniqueComponentId();
-        }
-    },
-    directives: {
-        focustrap: FocusTrap,
-        ripple: Ripple
-    },
-    components: {
-        Portal
+        console.warn('Deprecated since v4. Use Popover component instead.');
     }
 };
 </script>
diff --git a/components/lib/overlaypanel/style/OverlayPanelStyle.d.ts b/components/lib/overlaypanel/style/OverlayPanelStyle.d.ts
index 00c07cea0..545a6dfd0 100644
--- a/components/lib/overlaypanel/style/OverlayPanelStyle.d.ts
+++ b/components/lib/overlaypanel/style/OverlayPanelStyle.d.ts
@@ -1,3 +1,3 @@
-import { BaseStyle } from '../../base/style';
+import { PopoverStyle } from '../../popover/style/PopoverStyle';
 
-export interface OverlayPanelStyle extends BaseStyle {}
+export interface OverlayPanelStyle extends PopoverStyle {}
diff --git a/components/lib/overlaypanel/style/OverlayPanelStyle.js b/components/lib/overlaypanel/style/OverlayPanelStyle.js
index 5473da5f0..5f49164cb 100644
--- a/components/lib/overlaypanel/style/OverlayPanelStyle.js
+++ b/components/lib/overlaypanel/style/OverlayPanelStyle.js
@@ -1,16 +1,5 @@
 import BaseStyle from 'primevue/base/style';
 
-const classes = {
-    root: ({ instance }) => [
-        'p-popover p-component',
-        {
-            'p-ripple-disabled': instance.$primevue.config.ripple === false
-        }
-    ],
-    content: 'p-popover-content'
-};
-
 export default BaseStyle.extend({
-    name: 'overlaypanel',
-    classes
+    name: 'overlaypanel'
 });
diff --git a/components/lib/overlaypanel/BaseOverlayPanel.vue b/components/lib/popover/BasePopover.vue
similarity index 86%
rename from components/lib/overlaypanel/BaseOverlayPanel.vue
rename to components/lib/popover/BasePopover.vue
index f0f650885..b41a251fa 100644
--- a/components/lib/overlaypanel/BaseOverlayPanel.vue
+++ b/components/lib/popover/BasePopover.vue
@@ -1,9 +1,9 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import OverlayPanelStyle from 'primevue/overlaypanel/style';
+import PopoverStyle from 'primevue/popover/style';
 
 export default {
-    name: 'BaseOverlayPanel',
+    name: 'BasePopover',
     extends: BaseComponent,
     props: {
         dismissable: {
@@ -31,7 +31,7 @@ export default {
             default: true
         }
     },
-    style: OverlayPanelStyle,
+    style: PopoverStyle,
     provide() {
         return {
             $parentInstance: this
diff --git a/components/lib/popover/Popover.d.ts b/components/lib/popover/Popover.d.ts
new file mode 100755
index 000000000..5451dc82f
--- /dev/null
+++ b/components/lib/popover/Popover.d.ts
@@ -0,0 +1,263 @@
+/**
+ *
+ * Popover is a container component positioned as connected to its target.
+ *
+ * [Live Demo](https://primevue.org/popover)
+ *
+ * @module popover
+ *
+ */
+import { TransitionProps, VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent/BaseComponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
+
+export declare type PopoverPassThroughOptionType = PopoverPassThroughAttributes | ((options: PopoverPassThroughMethodOptions) => PopoverPassThroughAttributes | string) | string | null | undefined;
+
+export declare type PopoverPassThroughTransitionType = TransitionProps | ((options: PopoverPassThroughMethodOptions) => TransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PopoverPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: PopoverProps;
+    /**
+     * Defines current inline state.
+     */
+    state: PopoverState;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PopoverProps.pt}
+ */
+export interface PopoverPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: PopoverPassThroughOptionType;
+    /**
+     * Used to pass attributes to the content's DOM element.
+     */
+    content?: PopoverPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control Vue Transition API.
+     */
+    transition?: PopoverPassThroughTransitionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface PopoverPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Popover component.
+ */
+export interface PopoverState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
+/**
+ * Popover breakpoint metadata.
+ */
+export interface PopoverBreakpoints {
+    /**
+     * Breakpoint for responsive mode.
+     *
+     * Example:
+     *
+     * <Popover :breakpoints="{'960px': '75vw', '640px': '100vw'}" ... />
+     *
+     * Result:
+     *
+     * @media screen and (max-width: ${breakpoint[key]}) {
+     *      .p-popover[attributeSelector] {
+     *          width: ${breakpoint[value]} !important;
+     *      }
+     * }
+     */
+    [key: string]: string;
+}
+
+/**
+ * Defines valid properties in Popover component.
+ */
+export interface PopoverProps {
+    /**
+     * Enables to hide the overlay when outside is clicked.
+     * @defaultValue true
+     */
+    dismissable?: boolean;
+    /**
+     * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+     * @defaultValue body
+     */
+    appendTo?: HintedString<'body' | 'self'> | undefined | HTMLElement;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean;
+    /**
+     * Object literal to define widths per screen size.
+     */
+    breakpoints?: PopoverBreakpoints;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {PopoverPassThroughOptions}
+     */
+    pt?: PassThrough<PopoverPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Specifies if pressing escape key should hide the dialog.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean | undefined;
+}
+
+/**
+ * Defines valid slots in Popover component.
+ */
+export interface PopoverSlots {
+    /**
+     * Custom content template.
+     */
+    default(): VNode[];
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Close overlay panel function.
+         * @deprecated since v3.39.0. Use 'closeCallback' property instead.
+         */
+        onClose: () => void;
+        /**
+         * Close button keydown function.
+         * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'keydownCallback' property instead.
+         */
+        onKeydown: (event: Event) => void;
+        /**
+         * Close overlay panel function.
+         */
+        closeCallback: () => void;
+        /**
+         * Close button keydown function.
+         * @param {Event} event - Browser event
+         */
+        keydownCallback: (event: Event) => void;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in Popover component.
+ */
+export interface PopoverEmits {
+    /**
+     * Callback to invoke when the overlay is shown.
+     */
+    show(): void;
+    /**
+     * Callback to invoke when the overlay is hidden.
+     */
+    hide(): void;
+}
+
+/**
+ * **PrimeVue - Popover**
+ *
+ * _Popover, also known as Popover, is a container component that can overlay other components on page._
+ *
+ * [Live Demo](https://www.primevue.org/popover/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
+declare class Popover extends ClassComponent<PopoverProps, PopoverSlots, PopoverEmits> {
+    /**
+     * Aligns overlay panel based on the current position of the container.
+     */
+    alignOverlay(): void;
+    /**
+     * Toggles the visibility of the overlay.
+     * @param {Event} event - Browser event.
+     * @param {*} [target] - Optional target if event.currentTarget should not be used.
+     *
+     * @memberof Popover
+     */
+    toggle(event: Event, target?: any): void;
+    /**
+     * Shows the overlay.
+     * @param {Event} event - Browser event.
+     * @param {*} [target] - Optional target if event.currentTarget should not be used.
+     *
+     * @memberof Popover
+     */
+    show(event: Event, target?: any): void;
+    /**
+     * Hides the overlay.
+     *
+     * @memberof Popover
+     */
+    hide(): void;
+}
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Popover: GlobalComponentConstructor<Popover>;
+    }
+}
+
+export default Popover;
diff --git a/components/lib/overlaypanel/OverlayPanel.spec.js b/components/lib/popover/Popover.spec.js
similarity index 54%
rename from components/lib/overlaypanel/OverlayPanel.spec.js
rename to components/lib/popover/Popover.spec.js
index ccb9f6fd4..b57164cea 100644
--- a/components/lib/overlaypanel/OverlayPanel.spec.js
+++ b/components/lib/popover/Popover.spec.js
@@ -1,12 +1,12 @@
 import { mount } from '@vue/test-utils';
 import PrimeVue from 'primevue/config';
-import OverlayPanel from './OverlayPanel.vue';
+import Popover from './Popover.vue';
 
-describe('OverlayPanel.vue', () => {
+describe('Popover.vue', () => {
     let wrapper;
 
     beforeEach(async () => {
-        wrapper = mount(OverlayPanel, {
+        wrapper = mount(Popover, {
             global: {
                 plugins: [PrimeVue],
                 stubs: {
@@ -25,9 +25,9 @@ describe('OverlayPanel.vue', () => {
     });
 
     it('should exist', () => {
-        expect(wrapper.find('.p-overlaypanel.p-component').exists()).toBe(true);
-        expect(wrapper.find('.p-overlaypanel-content').exists()).toBe(true);
-        expect(wrapper.find('.p-overlaypanel-content').text()).toBe('PrimeVue');
-        expect(wrapper.find('.p-overlaypanel-close').exists()).toBe(true);
+        expect(wrapper.find('.p-popover.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-popover-content').exists()).toBe(true);
+        expect(wrapper.find('.p-popover-content').text()).toBe('PrimeVue');
+        expect(wrapper.find('.p-popover-close').exists()).toBe(true);
     });
 });
diff --git a/components/lib/popover/Popover.vue b/components/lib/popover/Popover.vue
new file mode 100755
index 000000000..2e5930ae3
--- /dev/null
+++ b/components/lib/popover/Popover.vue
@@ -0,0 +1,314 @@
+<template>
+    <Portal :appendTo="appendTo">
+        <transition name="p-popover" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
+            <div v-if="visible" :ref="containerRef" v-focustrap role="dialog" :aria-modal="visible" @click="onOverlayClick" :class="cx('root')" v-bind="ptmi('root')">
+                <slot v-if="$slots.container" name="container" :onClose="hide" :onKeydown="(event) => onButtonKeydown(event)" :closeCallback="hide" :keydownCallback="(event) => onButtonKeydown(event)"></slot>
+                <template v-else>
+                    <div :class="cx('content')" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown" v-bind="ptm('content')">
+                        <slot></slot>
+                    </div>
+                </template>
+            </div>
+        </transition>
+    </Portal>
+</template>
+
+<script>
+import FocusTrap from 'primevue/focustrap';
+import OverlayEventBus from 'primevue/overlayeventbus';
+import Portal from 'primevue/portal';
+import Ripple from 'primevue/ripple';
+import { $dt } from 'primevue/themes';
+import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import BasePopover from './BasePopover.vue';
+
+export default {
+    name: 'Popover',
+    extends: BasePopover,
+    inheritAttrs: false,
+    emits: ['show', 'hide'],
+    data() {
+        return {
+            visible: false
+        };
+    },
+    watch: {
+        dismissable: {
+            immediate: true,
+            handler(newValue) {
+                if (newValue) {
+                    this.bindOutsideClickListener();
+                } else {
+                    this.unbindOutsideClickListener();
+                }
+            }
+        }
+    },
+    selfClick: false,
+    target: null,
+    eventTarget: null,
+    outsideClickListener: null,
+    scrollHandler: null,
+    resizeListener: null,
+    container: null,
+    styleElement: null,
+    overlayEventListener: null,
+    documentKeydownListener: null,
+    beforeUnmount() {
+        if (this.dismissable) {
+            this.unbindOutsideClickListener();
+        }
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+
+        this.destroyStyle();
+        this.unbindResizeListener();
+        this.target = null;
+
+        if (this.container && this.autoZIndex) {
+            ZIndexUtils.clear(this.container);
+        }
+
+        if (this.overlayEventListener) {
+            OverlayEventBus.off('overlay-click', this.overlayEventListener);
+            this.overlayEventListener = null;
+        }
+
+        this.container = null;
+    },
+    mounted() {
+        if (this.breakpoints) {
+            this.createStyle();
+        }
+    },
+    methods: {
+        toggle(event, target) {
+            if (this.visible) this.hide();
+            else this.show(event, target);
+        },
+        show(event, target) {
+            this.visible = true;
+            this.eventTarget = event.currentTarget;
+            this.target = target || event.currentTarget;
+        },
+        hide() {
+            this.visible = false;
+        },
+        onContentClick() {
+            this.selfClick = true;
+        },
+        onEnter(el) {
+            this.container.setAttribute(this.attributeSelector, '');
+            DomHandler.addStyles(el, { position: 'absolute', top: '0', left: '0' });
+            this.alignOverlay();
+
+            if (this.dismissable) {
+                this.bindOutsideClickListener();
+            }
+
+            this.bindScrollListener();
+            this.bindResizeListener();
+
+            if (this.autoZIndex) {
+                ZIndexUtils.set('overlay', el, this.baseZIndex + this.$primevue.config.zIndex.overlay);
+            }
+
+            this.overlayEventListener = (e) => {
+                if (this.container.contains(e.target)) {
+                    this.selfClick = true;
+                }
+            };
+
+            this.focus();
+            OverlayEventBus.on('overlay-click', this.overlayEventListener);
+            this.$emit('show');
+
+            if (this.closeOnEscape) {
+                this.bindDocumentKeyDownListener();
+            }
+        },
+        onLeave() {
+            this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
+            this.unbindDocumentKeyDownListener();
+            OverlayEventBus.off('overlay-click', this.overlayEventListener);
+            this.overlayEventListener = null;
+            this.$emit('hide');
+        },
+        onAfterLeave(el) {
+            if (this.autoZIndex) {
+                ZIndexUtils.clear(el);
+            }
+        },
+        alignOverlay() {
+            DomHandler.absolutePosition(this.container, this.target, false);
+
+            const containerOffset = DomHandler.getOffset(this.container);
+            const targetOffset = DomHandler.getOffset(this.target);
+            let arrowLeft = 0;
+
+            if (containerOffset.left < targetOffset.left) {
+                arrowLeft = targetOffset.left - containerOffset.left;
+            }
+
+            this.container.style.setProperty($dt('overlay.arrow.left').name, `${arrowLeft}px`);
+
+            if (containerOffset.top < targetOffset.top) {
+                this.container.setAttribute('data-p-popover-flipped', 'true');
+                !this.isUnstyled && DomHandler.addClass(this.container, 'p-popover-flipped');
+            }
+        },
+        onContentKeydown(event) {
+            if (event.code === 'Escape' && this.closeOnEscape) {
+                this.hide();
+                DomHandler.focus(this.target);
+            }
+        },
+        onButtonKeydown(event) {
+            switch (event.code) {
+                case 'ArrowDown':
+                case 'ArrowUp':
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                    event.preventDefault();
+
+                default:
+                    break;
+            }
+        },
+        focus() {
+            let focusTarget = this.container.querySelector('[autofocus]');
+
+            if (focusTarget) {
+                focusTarget.focus();
+            }
+        },
+        onKeyDown(event) {
+            if (event.code === 'Escape' && this.closeOnEscape) {
+                this.visible = false;
+            }
+        },
+        bindDocumentKeyDownListener() {
+            if (!this.documentKeydownListener) {
+                this.documentKeydownListener = this.onKeyDown.bind(this);
+                window.document.addEventListener('keydown', this.documentKeydownListener);
+            }
+        },
+        unbindDocumentKeyDownListener() {
+            if (this.documentKeydownListener) {
+                window.document.removeEventListener('keydown', this.documentKeydownListener);
+                this.documentKeydownListener = null;
+            }
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener && DomHandler.isClient()) {
+                this.outsideClickListener = (event) => {
+                    if (this.visible && !this.selfClick && !this.isTargetClicked(event)) {
+                        this.visible = false;
+                    }
+
+                    this.selfClick = false;
+                };
+
+                document.addEventListener('click', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+                this.selfClick = false;
+            }
+        },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.target, () => {
+                    if (this.visible) {
+                        this.visible = false;
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.visible && !DomHandler.isTouchDevice()) {
+                        this.visible = false;
+                    }
+                };
+
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
+        isTargetClicked(event) {
+            return this.eventTarget && (this.eventTarget === event.target || this.eventTarget.contains(event.target));
+        },
+        containerRef(el) {
+            this.container = el;
+        },
+        createStyle() {
+            if (!this.styleElement && !this.isUnstyled) {
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
+                document.head.appendChild(this.styleElement);
+
+                let innerHTML = '';
+
+                for (let breakpoint in this.breakpoints) {
+                    innerHTML += `
+                        @media screen and (max-width: ${breakpoint}) {
+                            .p-popover[${this.attributeSelector}] {
+                                width: ${this.breakpoints[breakpoint]} !important;
+                            }
+                        }
+                    `;
+                }
+
+                this.styleElement.innerHTML = innerHTML;
+            }
+        },
+        destroyStyle() {
+            if (this.styleElement) {
+                document.head.removeChild(this.styleElement);
+                this.styleElement = null;
+            }
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.target
+            });
+        }
+    },
+    computed: {
+        attributeSelector() {
+            return UniqueComponentId();
+        }
+    },
+    directives: {
+        focustrap: FocusTrap,
+        ripple: Ripple
+    },
+    components: {
+        Portal
+    }
+};
+</script>
diff --git a/components/lib/popover/package.json b/components/lib/popover/package.json
new file mode 100644
index 000000000..f677be40a
--- /dev/null
+++ b/components/lib/popover/package.json
@@ -0,0 +1,9 @@
+{
+    "main": "./popover.cjs.js",
+    "module": "./popover.esm.js",
+    "unpkg": "./popover.min.js",
+    "types": "./Popover.d.ts",
+    "browser": {
+        "./sfc": "./Popover.vue"
+    }
+}
diff --git a/components/lib/popover/style/PopoverStyle.d.ts b/components/lib/popover/style/PopoverStyle.d.ts
new file mode 100644
index 000000000..fa132056f
--- /dev/null
+++ b/components/lib/popover/style/PopoverStyle.d.ts
@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style/BaseStyle';
+
+export interface PopoverStyle extends BaseStyle {}
diff --git a/components/lib/popover/style/PopoverStyle.js b/components/lib/popover/style/PopoverStyle.js
new file mode 100644
index 000000000..8a2a66815
--- /dev/null
+++ b/components/lib/popover/style/PopoverStyle.js
@@ -0,0 +1,16 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ instance }) => [
+        'p-popover p-component',
+        {
+            'p-ripple-disabled': instance.$primevue.config.ripple === false
+        }
+    ],
+    content: 'p-popover-content'
+};
+
+export default BaseStyle.extend({
+    name: 'popover',
+    classes
+});
diff --git a/components/lib/popover/style/package.json b/components/lib/popover/style/package.json
new file mode 100644
index 000000000..e6d6e6bef
--- /dev/null
+++ b/components/lib/popover/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./popoverstyle.cjs.js",
+    "module": "./popoverstyle.esm.js",
+    "unpkg": "./popoverstyle.min.js",
+    "types": "./PopoverStyle.d.ts"
+}
diff --git a/components/lib/themes/primeone/base/overlaypanel/index.js b/components/lib/themes/primeone/base/popover/index.js
similarity index 77%
rename from components/lib/themes/primeone/base/overlaypanel/index.js
rename to components/lib/themes/primeone/base/popover/index.js
index 674db7988..d36aa1318 100644
--- a/components/lib/themes/primeone/base/overlaypanel/index.js
+++ b/components/lib/themes/primeone/base/popover/index.js
@@ -2,9 +2,9 @@ export default {
     css: ({ dt }) => `
 .p-popover {
     margin-top: 10px;
-    background: ${dt('overlaypanel.background')};
-    color: ${dt('overlaypanel.color')};
-    border: 1px solid ${dt('overlaypanel.border.color')};
+    background: ${dt('popover.background')};
+    color: ${dt('popover.color')};
+    border: 1px solid ${dt('popover.border.color')};
     border-radius: ${dt('rounded.base')};
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }
@@ -51,7 +51,7 @@ export default {
     margin-left: -8px;
     border-style: solid;
     border-color: transparent;
-    border-bottom-color: ${dt('overlaypanel.background')};
+    border-bottom-color: ${dt('popover.background')};
 }
 
 .p-popover:before {
@@ -59,7 +59,7 @@ export default {
     margin-left: -10px;
     border-style: solid;
     border-color: transparent;
-    border-bottom-color: ${dt('overlaypanel.border.color')};
+    border-bottom-color: ${dt('popover.border.color')};
 }
 
 .p-popover-flipped:after,
@@ -70,12 +70,12 @@ export default {
 
 .p-popover.p-popover-flipped:after {
     border-bottom-color: transparent;
-    border-top-color: ${dt('overlaypanel.background')};
+    border-top-color: ${dt('popover.background')};
 }
 
 .p-popover.p-popover-flipped:before {
     border-bottom-color: transparent;
-    border-top-color: ${dt('overlaypanel.border.color')};
+    border-top-color: ${dt('popover.border.color')};
 }
 `
 };
diff --git a/components/lib/themes/primeone/base/overlaypanel/package.json b/components/lib/themes/primeone/base/popover/package.json
similarity index 100%
rename from components/lib/themes/primeone/base/overlaypanel/package.json
rename to components/lib/themes/primeone/base/popover/package.json
diff --git a/components/lib/themes/primeone/presets/aura/overlaypanel/index.js b/components/lib/themes/primeone/presets/aura/popover/index.js
similarity index 100%
rename from components/lib/themes/primeone/presets/aura/overlaypanel/index.js
rename to components/lib/themes/primeone/presets/aura/popover/index.js
diff --git a/components/lib/themes/primeone/presets/aura/overlaypanel/package.json b/components/lib/themes/primeone/presets/aura/popover/package.json
similarity index 100%
rename from components/lib/themes/primeone/presets/aura/overlaypanel/package.json
rename to components/lib/themes/primeone/presets/aura/popover/package.json