diff --git a/docs/components/popover.md b/docs/components/popover.md
index 2803712773..3daba7a81b 100644
--- a/docs/components/popover.md
+++ b/docs/components/popover.md
@@ -1,760 +1,566 @@
# Popover
-**KPop** is a popover component that is used when you need something with more detailed content then fits inside a tooltip. KPop has three slots; only two is necessary is to be filled to populate the component with content. The title prop must be passed in and the main slot and the content slot must be populated in for the popover to display anything.
+KPop is a popover component that comes in handy when you need to display more content than can fit in a tooltip.
-For example a button:
-
-
- button
-
- I am some sample text!
-
-
+
+
+
+
+
+
+
+
+
+ Apply
+
+
+
```html
-
- button
+
- I am some sample text!
+
+
+
+
+ Apply
```
+:::tip NOTE
+Check out [KTooltip](/components/tooltip) if you're looking for a component for showing tooltips. KPop is ideal for displaying more complex popover dialogs that might need to have interactive elements.
+:::
+
## Props
### buttonText
-This is the text that will be displayed on the button that triggers the popover if not using
-the default slot.
+Popover trigger button text. If you want to use your custom element as a popover trigger, check out the [`default` slot](#default).
-
+
- You clicked me!
+ Popover content.
```html
-
+
- You clicked me!
+ Popover content.
```
-### target
+### title
-This is the target `element` that the popover is appended to. By default its the body tag.
+Popover container title. Can also be [slotted](#title-1).
-
- button
+
- I am a popover, inside the .theme-default-content selector so
- I can get some of the stylings inside the theme!
+ Popover content.
```html
-
- button
+
- I am a popover, inside the .theme-default-content selector so
- I can get some of the stylings inside the theme!
+ Popover content.
```
-### tag
+### placement
-This is the tag that the popover is wrapped around. By default its the div tag.
+Placement of the popover.
-```html
-
- button
- I am inside a <details/> block!
-
-```
+Accepted values are:
+
+
+```html
+
- I am inside a <details/> block!
+ Popover content.
+```
-### title
+### trigger
-This is the Title of the popover. Either this or the title slot needs to be filled.
+Whether popover should be opened on trigger element click or mouseover.
-
- button
+Accepted values are:
+- `click` (default)
+- `hover`
+
+
- I am some sample text!
+ Popover content.
```html
-
- button
+
- I am some sample text!
+ Popover content.
```
-or alternatively, via the slot:
+### popoverTimeout
+
+When [`trigger` prop](#trigger) is `hover`, you can provide a timeout for popover to wait before it closes. Default value is 300 milliseconds.
-
-
- button
+
+
+ Popover content.
- I am a new sample header
- I am some sample text!
```html
-
-
- button
+
+
+ Popover content.
- I am a new sample header
- I am some sample text!
```
-### trigger
-
-What the popover is triggered by - by default it's triggered on click.
-
-Here are the different options:
+### disabled
-- `click`
-- `hover`
+Boolean to control whether popover should be disabled. Defaults to `false`.
-
- button
+
- I am triggered on hover!
+ Popover content.
```html
-
- button
+
- I am triggered on hover!
+ Popover content.
```
-### placement
-
-The position of where the popover appears - by default it appears on top.
-
-Here are the different options:
+### hideCaret
-
-
- {{ p }}
-
-
+Boolean to control whether the popover caret should be visible. Defaults to `false`.
-
-
+
+
+ Popover content.
+
+
-
- button
+```html
+
- I am placed on the {{ selectedPosition }}!
+ Popover content.
+```
+
+### closeOnPopoverClick
+
+Boolean to control whether or not the popover should close when a user clicks within the popover content. Default to `false`.
+
+
+
+
+
+
+
+ Click here
+
+
+
+
+
```html
-
-
-
-
- button
-
- I am placed on the {{ selectedPosition }}!
-
-
-
-
-
+
+
+
+ Click here
+
+
+
```
### positionFixed
-Use fixed positioning of the popover to avoid content being clipped by parental boundaries - defaults to `false`.
+A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries. Defaults to `true`.
-
-
- Click
+
+
- My parent is too small ðŸ˜
+ Popover content.
-
-```html
-
-
- Click
+
+
+ Non-fixed positioning
+
- My parent is too small ðŸ˜
-
-
-
-```
-
-
-
- Click
-
- My parent is too small, but I don't care 😎
+ Popover content.
```html
-
-
- Click
-
- My parent is too small, but I don't care 😎
-
-
-
-```
-
-### width
-
-The width of the popover body - by default it is `200px`. Currently we support numbers (will be converted to `px`), `auto`, and percentages for width.
-
-
- button
+
- I am 300 pixels wide!
+ Popover content.
+```
+
+### hideCloseIcon
+
+Boolean to hide close button in popover content.
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+
```html
-
- button
+
- I am 300 pixels wide!
+ Popover content.
```
-### maxWidth
+### width
-The max width of the popover body - by default it is `auto`.
+Width of the popover container. Default value is `200px`.
-
- button
+
- I am 500 pixels wide! I am 500 pixels wide! I am 500 pixels wide! I am 500 pixels wide! I am 500 pixels wide!
+ Popover content.
```html
-
- button
+
- I am 500 pixels wide! I am 500 pixels wide! I am 500 pixels wide! I am 500 pixels wide! I am 500 pixels wide!
+ Popover content.
```
-### zIndex
+### maxWidth
-The `z-index` of the popover - by default it is `1000`.
+Maximum width of the popover container. Default value is `auto`.
-```html
-
- button
-
- I have a z-index of 9999! I have a z-index of 9999!
+
+
+ Popover content.
-```
-
-### popoverClasses
-
-Custom classes that you want to append to the popover - by default it has a `k-popover` class on it.
```html
-
- button
+
- I have a custom my-class class on me!
+ Popover content.
```
-### popoverTransitions
+### target
-Custom transitions that you want the popover to have - by default it uses a `fade` transition.
+This is the target element selector that the popover is appended to. By default its the KPop wrapper element.
-```html
-
- button
-
- I use a slide transition!
-
-
-```
+Example: `#my-element-id`
-### popoverTimeout
+### tag
-Custom timeout setting that you want the popover to have - by default it is set to 300 milliseconds.
+KPop wrapper element type. Default value is `div`.
-
- button
-
- I have a 1 second timeout!
-
-
+### popoverClasses
+
+List of class names you want to assign to `.k-popover` element.
```html
-
- button
+
- I have a 1 second timeout!
+ Popover content.
```
### hidePopover
-You can pass in an optional flag to trigger the popover to hide - useful for external events like zooming or panning - by default it is set to `false`.
-
-```html
-
- button
-
- I am hidden depending on the outcome of the zoom function!
-
-
-```
+Optional boolean flag to hide the popover. Useful for external events. Default value is `false`.
-### disabled
+### zIndex
-You can pass in an optional flag to disable the popover - by default it is set to `false`.
+Pass a number to use for the `z-index` property. Default value is `1000`.
-```html
-
- button
-
- I do not trigger because I am disabled!
-
-
-```
+## Slots
-### hideCaret
+### content
-You can pass in an optional flag to not show the caret on the edge of the popover.
+Slot for passing popover content.
-
- button
+
- Look ma, no caret!
+ Popover content.
```html
-
- button
+
- Look ma, no caret!
+ Popover content.
```
-### onPopoverClick
+### default
-You can pass in an optional callback function to trigger when the popup is already open and the trigger method is click.
+Slot for passing custom popover trigger element.
-The callback function can optionally return a boolean, which will show or hide the popup depending on the value of the boolean.
+:::tip NOTE
+When providing your custom element as popover trigger, make sure to set appropriate `tabindex` attribute in order to make popover accessible for assistive technology users.
+:::
-
- button
+
+
- The first time you click the button, I will close when you click here once.
- The second time you click the button, I will close when you click here twice.
+ Must contain at least one special character: *!.
```html
-
- button
+
+
- The first time you click the button, I will close when you click here once.
- The second time you click the button, I will close when you click here twice.
+ Must contain at least one special character: *!.
-
-
-```
-
-### isSVG
-
-To support `` being able to be used inside an svg tag, use the `isSvg` prop. This will wrap the content of the KPop in a `` tag, so that normal HTML content can be injected into the popover.
-
-
-
-```html
-
-```
-
-## Slots
-
-- `default` There is a main slot that takes in the element you want the popover to be triggered over.
-
-```html
-
-
- button
-
```
-- `title`
+### title
-There is an optional title slot that can take in an element for the title. The title could alternatively be populated via the prop.
+Slot for passing custom popover title.
-```html
-
-
- button
-
+
- My Title
+ Popover title
-
-```
-
-- `actions`
-
-An optional slot for an actions button in the upper right corner of the popover.
-
-```html
-
-
- button
-
-
- View All
+
+ Popover content.
-```
-
-- `content`
-
-This is the slot that takes in the content of the popover.
```html
-
-
- button
-
+
+
+ Popover title
+
- I am some cool content
+ Popover content.
```
-- `footer`
+### footer
-This is an optional slot that takes in content for the footer bar. This typically is an actionable element like
-a button or link.
+Slot for passing footer content that goes directly underneath main popover content.
-```html
-
-
- button
-
-
- View All
-
-
-```
-
-Example:
-
-
- Fire!
-
-
Notifications
-
-
- Mark all as read
-
+
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend lorem ut ex tempus, a tincidunt elit hendrerit. Nunc eu ex vestibulum, consequat tellus sed, pharetra magna.
+ Popover content.
- View all notifications
+ Footer
```html
-
- Fire!
-
-
Notifications
-
-
- Mark all as read
-
+
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend lorem ut ex tempus, a tincidunt elit hendrerit. Nunc eu ex vestibulum, consequat tellus sed, pharetra magna.
+ Popover content.
- View all notifications
+ Footer
```
-## Usage
+## Events
-### Events / Loading Content
+### open
-- `opened` - emitted once the popover has been opened
-- `closed` - emitted when the popover has been triggered closed (emits on all triggers)
+Fires when the popover is opened.
-
- {{ buttonText }}
-
-
-
-
{{ message }}
-
-
-
+### close
-
+Fires when the popover is closed.
-```html
-
- {{ buttonText }}
-
-
-
-
{{ message }}
-
-
-
+### popover-click
+
+Fires when the popover content is clicked.
-
-```
-
+
\ No newline at end of file
diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 28293f3462..82ad6b87e5 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -622,8 +622,33 @@ KPagination now uses [KDropdown](/components/dropdown) instead of [KSelect](/com
* `PageSizeChangedData` interface has been renamed to `PageSizeChangeData`
* `PaginationType` type has been removed
-### KPopover
+### KPop
+#### Props
+
+* `isSvg` prop has been removed
+* default value of `buttonText` prop has changed
+* `popoverTransitions` prop has been removed
+* `testMode` prop has been removed
+* `onPopoverClick` prop has been removed. You can a combination of new `closeOnPopoverClick` prop and `popover-click` event instead
+* `positionFixed` prop default value has been changed to `true`
+
+#### Slots
+
+* `actions` slot has been removed
+
+#### Events
+
+* `opened` event has been renamed to `open`
+* `closed` event has been renamed to `close`
+
+#### Structure
+
+* `kpop-button` ... has been replaced with `popover-button`
+* `k-popover-header` class has been replaced with `popover-header`
+* `k-popover-title` class has been replaced with `popover-title`
+* `k-popover-content` class has been replaced with `popover-content`
+* `k-popover-footer` class has been replaced with `popover-footer`
### KPrompt
diff --git a/sandbox/index.ts b/sandbox/index.ts
index 8905a1183d..0b194e3b19 100644
--- a/sandbox/index.ts
+++ b/sandbox/index.ts
@@ -35,6 +35,7 @@ const sandboxAppLinks: SandboxNavigationItem[] = ([
{ name: 'KModal & KPrompt', to: { name: 'modals' } },
{ name: 'KMultiselect', to: { name: 'multiselect' } },
{ name: 'KPagination', to: { name: 'pagination' } },
+ { name: 'KPop', to: { name: 'pop' } },
{ name: 'KRadio', to: { name: 'radio' } },
{ name: 'KSegmentedControl', to: { name: 'segmentedcontrol' } },
{ name: 'KSelect', to: { name: 'select' } },
diff --git a/sandbox/pages/SandboxPop.vue b/sandbox/pages/SandboxPop.vue
new file mode 100644
index 0000000000..f3d1babfcb
--- /dev/null
+++ b/sandbox/pages/SandboxPop.vue
@@ -0,0 +1,291 @@
+
+
+