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:
-
-<KPop title="Cool header">
-  <KButton>button</KButton>
-  <template #content>
-    I am some sample text!
-  </template>
-</KPop>
+<KComponent
+  v-slot="{ data }"
+  :data="{ data1: false, data2: true }"
+>
+  <KPop
+    button-text="Open popover"
+    title="Communications settings"
+    width="350"
+  >
+    <template #content>
+      <div class="vertical-container">
+        <KInputSwitch label="Receive marketing communications" v-model="data.data1" />
+        <KInputSwitch label="Receive important updates" v-model="data.data2" />
+      </div>
+    </template>
+    <template #footer>
+      <KButton class="button-right">Apply</KButton>
+    </template>
+  </KPop>
+</KComponent>
 
 ```html
-<KPop title="Cool header">
-  <KButton>button</KButton>
+<KPop
+  button-text="Open popover"
+  title="Communications settings"
+  width="350"
+>
   <template #content>
-    I am some sample text!
+    <KInputSwitch label="Receive marketing communications" />
+    <KInputSwitch label="Receive important updates" />
+  </template>
+  <template #footer>
+    <KButton>Apply</KButton>
   </template>
 </KPop>
 ```
 
+:::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).
 
-<KPop title="Cool header" buttonText="Click Me!">
+<KPop button-text="Open popover">
   <template #content>
-    You clicked me!
+    Popover content.
   </template>
 </KPop>
 
 ```html
-<KPop title="Cool header" buttonText="Click Me!">
+<KPop button-text="Open popover">
   <template #content>
-    You clicked me!
+    Popover content.
   </template>
 </KPop>
 ```
 
-### target
+### title
 
-This is the target `element` that the <code>popover</code> is appended to. By default its the body tag.
+Popover container title. Can also be [slotted](#title-1).
 
-<KPop title="Cool header" target=".theme-default-content">
-  <KButton>button</KButton>
+<KPop
+  title="Popover title"
+  button-text="Open popover"
+>
   <template #content>
-    I am a popover, inside the <code>.theme-default-content</code> selector so
-    I can get some of the stylings inside the theme!
+    Popover content.
   </template>
 </KPop>
 
 ```html
-<KPop title="Cool header" target=".theme-default-content">
-  <KButton>button</KButton>
+<KPop
+  title="Popover title"
+  button-text="Open popover"
+>
   <template #content>
-    I am a popover, inside the <code>.theme-default-content</code> selector so
-    I can get some of the stylings inside the theme!
+    Popover content.
   </template>
 </KPop>
 ```
 
-### tag
+### placement
 
-This is the tag that the popover is wrapped around. By default its the div tag.
+Placement of the popover.
 
-```html
-<KPop title="Cool header" tag="details">
-  <KButton>button</KButton>
-  <template #content>I am inside a &lt;details/&gt; block!</template>
-</KPop>
-```
+Accepted values are:
+<ul>
+  <li v-for="placement in PopPlacementsArray" :key="`${placement}-placement`">
+    <code>{{ placement }}</code> {{ placement === 'auto' ? '(default)' : '' }}
+  </li>
+</ul>
 
-<KPop title="Cool header" tag="details">
-  <KButton>button</KButton>
+<div class="horizontal-container">
+  <KPop
+    v-for="placement in PopPlacementsArray"
+    :key="placement"
+    :button-text="placement"
+    :placement="placement"
+  >
+    <template #content>
+      Popover content.
+    </template>
+  </KPop>
+</div>
+
+```html
+<KPop
+  placement="bottomEnd"
+  button-text="Open popover"
+>
   <template #content>
-    I am inside a &lt;details/&gt; block!
+    Popover content.
   </template>
 </KPop>
+```
 
-### 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.
 
-<KPop title="I am a new sample header">
-  <KButton>button</KButton>
+Accepted values are:
+- `click` (default)
+- `hover`
+
+<KPop
+  trigger="hover"
+  button-text="Open popover"
+>
   <template #content>
-    I am some sample text!
+    Popover content.
   </template>
 </KPop>
 
 ```html
-<KPop title="I am a new sample header">
-  <KButton>button</KButton>
+<KPop
+  trigger="hover"
+  button-text="Open popover"
+>
   <template #content>
-    I am some sample text!
+    Popover content.
   </template>
 </KPop>
 ```
 
-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.
 
-<KPop>
-  <template #default>
-    <KButton>button</KButton>
+<KPop
+  :popover-timeout="3000"
+  trigger="hover"
+  button-text="Open popover"
+>
+  <template #content>
+    Popover content.
   </template>
-  <template #title>I am a new sample header</template>
-  <template #content>I am some sample text!</template>
 </KPop>
 
 ```html
-<KPop>
-  <template>
-    <KButton>button</KButton>
+<KPop
+  :popover-timeout="3000"
+  trigger="hover"
+  button-text="Open popover"
+>
+  <template #content>
+    Popover content.
   </template>
-  <template #title>I am a new sample header</template>
-  <template #content>I am some sample text!</template>
 </KPop>
 ```
 
-### 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`.
 
-<KPop title="Cool header" trigger="hover">
-  <KButton>button</KButton>
+<KPop
+  disabled
+  button-text="Open popover"
+>
   <template #content>
-    I am triggered on hover!
+    Popover content.
   </template>
 </KPop>
 
 ```html
-<KPop title="Cool header" trigger="hover">
-  <KButton>button</KButton>
+<KPop
+  disabled
+  button-text="Open popover"
+>
   <template #content>
-    I am triggered on hover!
+    Popover content.
   </template>
 </KPop>
 ```
 
-### placement
-
-The position of where the popover appears - by default it appears on top.
-
-Here are the different options:
+### hideCaret
 
-<ul>
-  <li
-    v-for="p in positions"
-    :key="p">
-    <code>{{ p }}</code>
-  </li>
-</ul>
+Boolean to control whether the popover caret should be visible. Defaults to `false`.
 
-<select class="k-input" v-model="selectedPosition">
-  <option
-    v-for="p in positions"
-    :key="p"
-    :value="p">{{ p }}</option>
-</select>
-<br>
+<KPop
+  hide-caret
+  button-text="Open popover"
+>
+  <template #content>
+    Popover content.
+  </template>
+</KPop>
 
-<KPop title="Cool header" trigger="hover" :placement="selectedPosition">
-  <KButton>button</KButton>
+```html
+<KPop
+  hide-caret
+  button-text="Open popover"
+>
   <template #content>
-    I am placed on the {{ selectedPosition }}!
+    Popover content.
   </template>
 </KPop>
+```
+
+### closeOnPopoverClick
+
+Boolean to control whether or not the popover should close when a user clicks within the popover content. Default to `false`.
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ closeOnPopoverClick: false }"
+>
+  <div class="vertical-container">
+    <KInputSwitch
+      v-model="data.closeOnPopoverClick"
+      label="Close on popover click"
+    />
+    <KPop
+      :close-on-popover-click="data.closeOnPopoverClick"
+      button-text="Open popover"
+    >
+      <template #content>
+        <KButton size="small">
+          Click here
+        </KButton>
+      </template>
+    </KPop>
+  </div>
+</KComponent>
 
 ```html
-<template>
-  <select v-model="selectedPosition">
-    <option
-      v-for="p in positions"
-      :key="p"
-      :value="p">{{ p }}</option>
-  </select>
-
-  <KPop title="Cool header" trigger="hover" :placement="selectedPosition">
-    <KButton>button</KButton>
-    <template #content>
-      I am placed on the {{ selectedPosition }}!
-    </template>
-  </KPop>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  data () {
-    return {
-      selectedPosition: 'auto',
-      positions: [
-        'auto',
-        'top',
-        'topStart',
-        'topEnd',
-        'left',
-        'leftStart',
-        'leftEnd',
-        'right',
-        'rightStart',
-        'rightEnd',
-        'bottom',
-        'bottomStart',
-        'bottomEnd'
-      ]
-    }
-  }
-})
-</script>
+<KPop
+  close-on-popover-click
+  button-text="Open popover"
+>
+  <template #content>
+    <KButton size="small">
+      Click here
+    </KButton>
+  </template>
+</KPop>
 ```
 
 ### 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`.
 
-<div style="width: 300px; height: 125px; position: relative; overflow: hidden; z-index: 1; background-color: salmon;">
-  <KPop
-    title="Look Mah!"
-    width="170"
-    placement="right"
-  >
-    <KButton>Click</KButton>
+<div class="position-fixed-container">
+  <KPop button-text="Fixed positioning" positioning="top">
     <template #content>
-      My parent is too small 😭
+      Popover content.
     </template>
   </KPop>
-</div>
 
-```html
-<div style="width: 300px; height: 125px; position: relative; overflow: hidden; z-index: 1; background-color: salmon;">
-  <KPop
-    title="Look Mah!"
-    width="170"
-    placement="right"
-  >
-    <KButton>Click</KButton>
+  <KPop :position-fixed="false" positioning="top">
+    <KButton appearance="danger">
+      Non-fixed positioning
+    </KButton>
     <template #content>
-      My parent is too small 😭
-    </template>
-  </KPop>
-</div>
-```
-
-<div style="width: 300px; height: 125px; position: relative; overflow: hidden; z-index: 1; background-color: lightblue;">
-  <KPop
-    title="Look Mah!"
-    width="170"
-    placement="right"
-    :position-fixed="true"
-  >
-    <KButton>Click</KButton>
-    <template #content>
-      My parent is too small, but I don't care 😎
+      Popover content.
     </template>
   </KPop>
 </div>
 
 ```html
-<div style="width: 300px; height: 125px; position: relative; overflow: hidden; z-index: 1; background-color: lightblue;">
-  <KPop
-    title="Look Mah!"
-    width="170"
-    placement="right"
-    :position-fixed="true"
-  >
-    <KButton>Click</KButton>
-    <template #content>
-      My parent is too small, but I don't care 😎
-    </template>
-  </KPop>
-</div>
-```
-
-### 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.
-
-<KPop title="Cool header" width="300">
-  <KButton>button</KButton>
+<KPop
+  :position-fixed="false"
+  button-text="Open popover"
+>
   <template #content>
-    I am 300 pixels wide!
+    Popover content.
   </template>
 </KPop>
+```
+
+### hideCloseIcon
+
+Boolean to hide close button in popover content.
+
+<KComponent
+  v-slot="{ data }"
+  :data="{ hideCloseIcon: false }"
+>
+  <div class="vertical-container">
+    <KInputSwitch
+      v-model="data.hideCloseIcon"
+      label="Hide close icon"
+    />
+    <KPop
+      button-text="Open popover"
+      :hide-close-icon="data.hideCloseIcon"
+    >
+      <template #content>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </template>
+    </KPop>
+  </div>
+</KComponent>
 
 ```html
-<KPop title="Cool header" width="300">
-  <KButton>button</KButton>
+<KPop
+  hide-close-icon
+  button-text="Open popover"
+>
   <template #content>
-    I am 300 pixels wide!
+    Popover content.
   </template>
 </KPop>
 ```
 
-### maxWidth
+### width
 
-The max width of the popover body - by default it is `auto`.
+Width of the popover container. Default value is `200px`.
 
-<KPop title="Cool header" width="auto" max-width="500">
-  <KButton>button</KButton>
+<KPop
+  width="500"
+  button-text="Open popover"
+>
   <template #content>
-    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.
   </template>
 </KPop>
 
 ```html
-<KPop title="Cool header" max-width="500">
-  <KButton>button</KButton>
+<KPop
+  width="500"
+  button-text="Open popover"
+>
   <template #content>
-    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.
   </template>
 </KPop>
 ```
 
-### zIndex
+### maxWidth
 
-The `z-index` of the popover - by default it is `1000`.
+Maximum width of the popover container. Default value is `auto`.
 
-```html
-<KPop title="Cool header" z-index="9999">
-  <KButton>button</KButton>
-  <template v-slot:content>
-    I have a z-index of 9999! I have a z-index of 9999!
+<KPop
+  max-width="120"
+  button-text="Open popover"
+>
+  <template #content>
+    Popover content.
   </template>
 </KPop>
-```
-
-### popoverClasses
-
-Custom classes that you want to append to the popover - by default it has a `k-popover` class on it.
 
 ```html
-<KPop title="Cool header" popoverClasses="my-class">
-  <KButton>button</KButton>
+<KPop
+  max-width="120"
+  button-text="Open popover"
+>
   <template #content>
-    I have a custom my-class class on me!
+    Popover content.
   </template>
 </KPop>
 ```
 
-### 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
-<KPop title="Cool header" popoverTransitions="slide">
-  <KButton>button</KButton>
-  <template #content>
-    I use a slide transition!
-  </template>
-</KPop>
-```
+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`.
 
-<KPop title="Cool header" :popover-timeout="1000" trigger="hover">
-  <KButton>button</KButton>
-  <template #content>
-    I have a 1 second timeout!
-  </template>
-</KPop>
+### popoverClasses
+
+List of class names you want to assign to `.k-popover` element.
 
 ```html
-<KPop title="Cool header" :popover-timeout="1000">
-  <KButton>button</KButton>
+<KPop
+  popover-classes="foo bar"
+  button-text="Open popover"
+>
   <template #content>
-    I have a 1 second timeout!
+    Popover content.
   </template>
 </KPop>
 ```
 
 ### 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
-<KPop title="Cool header" hidePopover="zoom()">
-  <KButton>button</KButton>
-  <template #content>
-  I am hidden depending on the outcome of the zoom function!
-  </template>
-</KPop>
-```
+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
-<KPop title="Cool header" disabled="true">
-  <KButton>button</KButton>
-  <template #content>
-    I do not trigger because I am disabled!
-  </template>
-</KPop>
-```
+## 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.
 
-<KPop title="Cool header" hide-caret placement="right">
-  <KButton>button</KButton>
+<KPop button-text="Open popover">
   <template #content>
-    Look ma, no caret!
+    Popover content.
   </template>
 </KPop>
 
 ```html
-<KPop title="Cool header" hide-caret placement="right">
-  <KButton>button</KButton>
+<KPop button-text="Open popover">
   <template #content>
-    Look ma, no caret!
+    Popover content.
   </template>
 </KPop>
 ```
 
-### 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.
+:::
 
-<KPop title="Cool header" :on-popover-click="toggle">
-  <KButton>button</KButton>
+<KPop
+  width="auto"
+  hide-close-icon
+>
+  <KInput
+    label="Password"
+    type="password"
+    placeholder="Enter a strong password"
+  />
   <template #content>
-    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: *!&#.
   </template>
 </KPop>
 
 ```html
-<KPop title="Cool header" :on-popover-click="toggle">
-  <KButton>button</KButton>
+<KPop
+  width="auto"
+  hide-close-icon
+>
+  <KInput
+    label="Password"
+    type="password"
+    placeholder="Enter a strong password"
+  />
   <template #content>
-    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: *!&#.
   </template>
 </KPop>
-
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  setup() {
-    const isToggled = ref(true)
-    const toggle = (): void => {
-      isToggled.value = !isToggled.value
-      return isToggled.value
-    }
-
-    return { isToggled }
-  }
-})
-</script>
-```
-
-### isSVG
-
-To support `<KPop>` being able to be used inside an svg tag, use the `isSvg` prop. This will wrap the content of the KPop in a `<foreignObject>` tag, so that normal HTML content can be injected into the popover.
-
-<svg style="cursor: pointer; height: 20px; width: 20px; margin-right: 16px;" v-for="light in [{ color: 'red', value: 'red'}, { color: 'yellow', value: 'gold'}, { color: 'green', value: 'lime'}]">
-  <KPop trigger="hover" :title="light.color" :is-svg="true" tag="svg" :popover-timeout="10">
-    <template #content>
-      <p>{{ light.color }} means {{ light.color == 'green' ? 'GO!' : (light.color == 'red' ? 'STOP!' : 'SLOW DOWN!') }}</p>
-    </template>
-    <rect :fill="`${light.value}`" width="20" height="20" rx="20" ry="20"></rect>
-  </KPop>
-</svg>
-
-```html
-<svg v-for="light in ['red', 'gold', 'lime']">
-  <KPop trigger="hover" title="Light" :is-svg="true" tag="g" :popover-timeout="10">
-    <template #content>
-      <p>{{ light }} means {{ light == 'green' ? 'GO!' : (light == 'red' ? 'STOP!' : 'SLOW DOWN!') }}</p>
-    </template>
-    <rect :fill="`${light}`" width="20" height="20" rx="20" ry="20"></rect>
-  </KPop>
-</svg>
-```
-
-## Slots
-
-- `default` There is a main slot that takes in the element you want the popover to be triggered over.
-
-```html
-<KPop title="Cool header">
-  <!-- Your element goes here -->
-  <KButton>button</KButton>
-</KPop>
 ```
 
-- `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
-<KPop title="Cool header">
-  <!-- Your element goes here -->
-  <KButton>button</KButton>
-  <!-- Your title goes here -->
+<KPop button-text="Open popover">
   <template #title>
-    My Title
+    Popover title
   </template>
-</KPop>
-```
-
-- `actions`
-
-An optional slot for an actions button in the upper right corner of the popover.
-
-```html
-<KPop title="Cool header">
-  <!-- Your element goes here -->
-  <KButton>button</KButton>
-  <!-- Your content goes here -->
-  <template #actions>
-    View All
+  <template #content>
+    Popover content.
   </template>
 </KPop>
-```
-
-- `content`
-
-This is the slot that takes in the content of the popover.
 
 ```html
-<KPop title="Cool header">
-  <!-- Your element goes here -->
-  <KButton>button</KButton>
-  <!-- Your content goes here -->
+<KPop button-text="Open popover">
+  <template #title>
+    Popover title
+  </template>
   <template #content>
-    I am some cool content
+    Popover content.
   </template>
 </KPop>
 ```
 
-- `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
-<KPop title="Cool header">
-  <!-- Your element goes here -->
-  <KButton>button</KButton>
-  <!-- Your footer content goes here -->
-  <template #footer>
-    View All
-  </template>
-</KPop>
-```
-
-Example:
-
-<KPop title="Notifications" :on-popover-click="toggle" width="500">
-  <KButton>Fire!</KButton>
-  <template #title>
-    <div>Notifications</div>
-  </template>
-  <template #actions>
-    <KButton appearance="tertiary" size="small">Mark all as read</KButton>
-  </template>
+<KPop button-text="Open popover">
   <template #content>
-    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.
   </template>
   <template #footer>
-    <KButton size="small">View all notifications</KButton>
+    <KBadge>Footer</KBadge>
   </template>
 </KPop>
 
 ```html
-<KPop title="Notifications" :on-popover-click="toggle" width="500">
-  <KButton>Fire!</KButton>
-  <template #title>
-    <div>Notifications</div>
-  </template>
-  <template #actions>
-    <KButton appearance="tertiary" size="small">Mark all as read</KButton>
-  </template>
+<KPop button-text="Open popover">
   <template #content>
-    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.
   </template>
   <template #footer>
-    <KButton size="small">View all notifications</KButton>
+    <KBadge>Footer</KBadge>
   </template>
 </KPop>
 ```
 
-## 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.
 
-<KPop @opened="loadSomething" @closed="onClose">
-  <KButton :disabled="currentState == 'pending'">{{ buttonText }}</KButton>
-  <template #content>
-    <div style="justify-content: center;" class="loading-container">
-      <KIcon v-if="currentState == 'pending'" icon="spinner" color="purple" />
-      <div>{{ message }}</div>
-    </div>
-  </template>
-</KPop>
+### close
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  data () {
-    return {
-      selectedPosition: 'auto',
-      positions: [
-        'auto',
-        'top',
-        'topStart',
-        'topEnd',
-        'left',
-        'leftStart',
-        'leftEnd',
-        'right',
-        'rightStart',
-        'rightEnd',
-        'bottom',
-        'bottomStart',
-        'bottomEnd'
-      ],
-      currentState: 'idle',
-      states: {
-        'idle': 'pending',
-        'pending': 'idle'
-      },
-      count: 0,
-      isToggled: true,
-      timeout: null
-    }
-  },
-  computed: {
-    buttonText () {
-      return {
-        'pending': 'Loading something...',
-        'idle': 'Load something'
-      }[this.currentState]
-    },
-    message () {
-      return {
-        'pending': `Loading ${this.count}...`,
-        'idle': 'Loaded!'
-      }[this.currentState]
-    }
-  },
-  methods: {
-    loadSomething () {
-      this.transition()
-      this.timeout = setTimeout(() => {
-        this.count+=1
-        this.transition()
-      }, 2000)
-    },
-    toggle () {
-      this.isToggled = !this.isToggled
-      return this.isToggled
-    },
-    onClose () {
-      clearTimeout(this.timeout)
-      if (this.currentState == 'pending') {
-        this.transition()
-      }
-    },
-    transition() {
-      this.currentState = this.states[this.currentState]
-    }
-  }
-})
-</script>
+Fires when the popover is closed.
 
-```html
-<KPop @opened="loadSomething" @closed="onClose">
-  <KButton :disabled="currentState == 'pending'">{{ buttonText }}</KButton>
-  <template #content>
-    <div style="justify-content: center;">
-      <KIcon v-if="currentState == 'pending'" icon="spinner" color="purple" />
-      <div>{{ message }}</div>
-    </div>
-  </template>
-</KPop>
+### popover-click
+
+Fires when the popover content is clicked.
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  data () {
-    return {
-      currentState: 'idle',
-      states: {
-        'idle': 'pending',
-        'pending': 'idle'
-      },
-      count: 0,
-      timeout: null
-    }
-  },
-  computed: {
-    buttonText () {
-      return {
-        'pending': 'Loading something...',
-        'idle': 'Load something'
-      }[this.currentState]
-    },
-    message () {
-      return {
-        'pending': `Loading ${this.count}...`,
-        'idle': 'Loaded!'
-      }[this.currentState]
-    }
-  },
-  methods: {
-    loadSomething () {
-      this.transition()
-      this.timeout = setTimeout(() => {
-        this.count+=1
-        this.transition()
-      }, 2000)
-    },
-    onClose () {
-      clearTimeout(this.timeout)
-      this.transition()
-    },
-    transition() {
-      this.currentState = this.states[this.currentState]
-    }
-  }
-})
+<script setup lang="ts">
+import { PopPlacementsArray } from '@/types'
 </script>
-```
 
-<style scoped>
-select {
-  height: 38px;
-  background-color: #fff !important;
-  width: 250px;
+<style lang="scss" scoped>
+.horizontal-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $kui-space-50;
+}
+
+.vertical-container {
+  display: flex;
+  flex-direction: column;
+  gap: $kui-space-40;
 }
 
-.loading-container {
+.position-fixed-container {
+  background-color: $kui-color-background-neutral-weakest;
+  border: $kui-border-width-10 dashed $kui-color-border-neutral-weak;
+  width: fit-content;
+  padding: $kui-space-90;
+  overflow: hidden;
+  position: relative;
   display: flex;
+  gap: $kui-space-50;
+  border-radius: $kui-border-radius-30;
+}
+
+.button-right {
+  margin-left: $kui-space-auto;
 }
-</style>
+</style>
\ 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 @@
+<template>
+  <SandboxLayout
+    :links="inject('app-links', [])"
+    title="KPop"
+  >
+    <div class="kpop-sandbox">
+      <SandboxSectionComponent>
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=1470%3A3448&mode=dev&t=qJAFUBmW2m9dkFvT-1">
+          Figma
+        </KExternalLink>
+      </SandboxSectionComponent>
+
+      <!-- Props -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Props"
+      />
+      <SandboxSectionComponent title="buttonText">
+        <KPop button-text="KPop Button">
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="tag">
+        <KPop
+          button-text="Button"
+          tag="section"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="title">
+        <KPop
+          button-text="Button"
+          title="Popover title"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="trigger">
+        <KPop
+          button-text="Button"
+          trigger="hover"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="placement">
+        <div class="vertical-container">
+          <KPop
+            v-for="placement in PopPlacementsArray"
+            :key="placement"
+            :button-text="placement"
+            :placement="placement"
+          >
+            <template #content>
+              Popover content.
+            </template>
+          </KPop>
+        </div>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="width">
+        <KPop
+          button-text="Button"
+          width="500"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="maxWidth">
+        <KPop
+          button-text="Button"
+          max-width="100"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="popoverTimeout">
+        <KPop
+          button-text="Button"
+          :popover-timeout="3000"
+          trigger="hover"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="hidePopover">
+        <p>
+          <span v-if="!hidingPopover">Hide popover: <code>false</code></span>
+          <span v-else>Hiding popover in: {{ timeoutValue }}</span>
+        </p>
+        <KPop :hide-popover="showPopover">
+          <KButton @click="startPopoverTimeout">
+            Button
+          </KButton>
+
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="disabled">
+        <KPop
+          button-text="Button"
+          disabled
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent
+        title="hideCaret"
+      >
+        <KPop
+          button-text="Button"
+          hide-caret
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="hideCloseIcon">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ hideCloseIcon: false }"
+        >
+          <KInputSwitch
+            v-model="data.hideCloseIcon"
+            label="Hide close icon"
+          />
+
+          <KPop
+            button-text="Button"
+            :hide-close-icon="data.hideCloseIcon"
+          >
+            <template #content>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </template>
+          </KPop>
+        </KComponent>
+      </SandboxSectionComponent>
+
+      <!-- Slots -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Slots"
+      />
+      <SandboxSectionComponent title="default">
+        <KPop>
+          <KButton appearance="secondary">
+            Slotted button
+          </KButton>
+
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="title & content">
+        <KPop button-text="Button">
+          <template #title>
+            Popover title
+          </template>
+
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="footer">
+        <KPop button-text="Button">
+          <template #content>
+            Popover content.
+          </template>
+
+          <template #footer>
+            <KButton size="small">
+              Footer button
+            </KButton>
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+
+      <!-- Events -->
+      <SandboxTitleComponent
+        is-subtitle
+        title="Events"
+      />
+      <SandboxSectionComponent title="open & close">
+        <KPop
+          button-text="Button"
+          @close="onEvent('Popover closed')"
+          @open="onEvent('Popover opened')"
+        >
+          <template #content>
+            Popover content.
+          </template>
+        </KPop>
+      </SandboxSectionComponent>
+      <SandboxSectionComponent title="popover-click">
+        <KComponent
+          v-slot="{ data }"
+          :data="{ closeOnPopoverClick: false }"
+        >
+          <KInputSwitch
+            v-model="data.closeOnPopoverClick"
+            label="Close on popover click"
+          />
+          <KPop
+            button-text="Button"
+            :close-on-popover-click="data.closeOnPopoverClick"
+            @close="onEvent('Popover closed')"
+            @open="onEvent('Popover opened')"
+            @popover-click="onEvent('Popover clicked')"
+          >
+            <template #content>
+              <KButton
+                size="small"
+                @click="onEvent('Popover content clicked')"
+              >
+                Click here
+              </KButton>
+            </template>
+          </KPop>
+        </KComponent>
+      </SandboxSectionComponent>
+    </div>
+  </SandboxLayout>
+</template>
+
+<script setup lang="ts">
+import { inject, nextTick, ref, watch } from 'vue'
+import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
+import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
+import { PopPlacementsArray } from '@/types'
+
+const hidingPopover = ref<boolean>(false)
+const interval = ref<any>(null)
+const showPopover = ref<boolean>(true)
+const timeoutValue = ref<number>(3)
+
+const startPopoverTimeout = () => {
+  hidingPopover.value = true
+
+  setTimeout(() => {
+    showPopover.value = false
+  }, 3000)
+
+  interval.value = setInterval(() => {
+    timeoutValue.value -= 1
+  }, 1000)
+}
+
+watch(showPopover, async (value) => {
+  if (!value) {
+    await nextTick()
+    clearInterval(interval.value)
+    hidingPopover.value = false
+    showPopover.value = true
+    timeoutValue.value = 3
+    interval.value = null
+  }
+})
+
+const onEvent = (message: string): void => {
+  console.log(message)
+}
+</script>
+
+<style lang="scss" scoped>
+.vertical-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $kui-space-50;
+}
+</style>
diff --git a/sandbox/pages/SandboxTable/SandboxTable.vue b/sandbox/pages/SandboxTable/SandboxTable.vue
index cd022f879a..b62a474d09 100644
--- a/sandbox/pages/SandboxTable/SandboxTable.vue
+++ b/sandbox/pages/SandboxTable/SandboxTable.vue
@@ -5,13 +5,9 @@
   >
     <div class="ktable-sandbox">
       <SandboxSectionComponent>
-        <iframe
-          allowfullscreen
-          height="450"
-          src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FYze0SWXl5nKjR0rFdilljK%2FComponents%3Ftype%3Ddesign%26node-id%3D418%253A12464%26mode%3Ddesign%26t%3DLUYNbmqFH50qSmKC-1"
-          style="border: 1px solid rgba(0, 0, 0, 0.1);"
-          width="800"
-        />
+        <KExternalLink href="https://www.figma.com/file/Yze0SWXl5nKjR0rFdilljK/Components?type=design&node-id=418%3A12464&mode=dev&t=qJAFUBmW2m9dkFvT-1">
+          Figma
+        </KExternalLink>
       </SandboxSectionComponent>
 
       <!-- Props -->
diff --git a/sandbox/router/sandbox-routes.ts b/sandbox/router/sandbox-routes.ts
index e12359935a..6a55712f5b 100644
--- a/sandbox/router/sandbox-routes.ts
+++ b/sandbox/router/sandbox-routes.ts
@@ -128,6 +128,12 @@ const componentRoutes: RouteRecordRaw[] = [
     meta: { title: 'Pagination Sandbox' },
     component: () => import('../pages/SandboxPagination.vue'),
   },
+  {
+    path: '/pop',
+    name: 'pop',
+    meta: { title: 'Pop Sandbox' },
+    component: () => import('../pages/SandboxPop.vue'),
+  },
   {
     path: '/radio',
     name: 'radio',
diff --git a/src/components/KCopy/KCopy.cy.ts b/src/components/KCopy/KCopy.cy.ts
index 7d77da3f06..772c7ceb8e 100644
--- a/src/components/KCopy/KCopy.cy.ts
+++ b/src/components/KCopy/KCopy.cy.ts
@@ -136,7 +136,7 @@ describe('KCopy', () => {
 
       cy.get(container).should('be.visible')
       cy.get(container).find('.k-tooltip').should('exist')
-      cy.get(container).find('.k-tooltip .k-popover-content').should('contain.text', tooltipText)
+      cy.get(container).find('.k-tooltip .popover-content').should('contain.text', tooltipText)
     })
 
     it('renders with `textTooltip` prop set', () => {
@@ -151,7 +151,7 @@ describe('KCopy', () => {
 
       cy.get(container).should('be.visible')
       cy.get(container).find('.k-tooltip').should('exist')
-      cy.get(container).find('.k-tooltip .k-popover-content').should('contain.text', tooltipText)
+      cy.get(container).find('.k-tooltip .popover-content').should('contain.text', tooltipText)
     })
 
     it('renders `successTooltip` with `copyTooltip` prop set', () => {
@@ -168,9 +168,9 @@ describe('KCopy', () => {
 
       cy.get(container).should('be.visible')
       cy.get(container).find('.k-tooltip').should('exist')
-      cy.get(container).find('.k-tooltip .k-popover-content').should('contain.text', tooltipText)
+      cy.get(container).find('.k-tooltip .popover-content').should('contain.text', tooltipText)
       cy.get('[data-testid="copy-to-clipboard"]').click()
-      cy.get(container).find('.k-tooltip .k-popover-content').should('contain.text', successText)
+      cy.get(container).find('.k-tooltip .popover-content').should('contain.text', successText)
     })
   })
 })
diff --git a/src/components/KDateTimePicker/KDateTimePicker.cy.ts b/src/components/KDateTimePicker/KDateTimePicker.cy.ts
index 4bb5674615..b4a1b5cbd6 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.cy.ts
+++ b/src/components/KDateTimePicker/KDateTimePicker.cy.ts
@@ -112,7 +112,7 @@ describe('KDateTimePicker', () => {
 
     // Open the date time picker, click "Clear" and make sure default placeholder is shown
     cy.getTestId(timepickerInput).click()
-    const wrapper = cy.get('.k-popover-content')
+    const wrapper = cy.get('.popover-content')
     wrapper.should('be.visible')
     cy.getTestId(clearButton).should('exist')
     cy.getTestId(clearButton).eq(0).click()
@@ -178,7 +178,7 @@ describe('KDateTimePicker', () => {
 
     // Open the date time picker, click "Submit"
     cy.getTestId(timepickerInput).click()
-    cy.get('.k-popover-content').should('be.visible')
+    cy.get('.popover-content').should('be.visible')
     cy.getTestId(clearButton).should('exist')
     cy.getTestId(submitButton).should('exist')
   })
@@ -195,7 +195,7 @@ describe('KDateTimePicker', () => {
 
     // Open the date time picker, click "Clear"
     cy.getTestId(timepickerInput).click()
-    cy.get('.k-popover-content').should('be.visible')
+    cy.get('.popover-content').should('be.visible')
     cy.getTestId(clearButton).should('exist')
     cy.getTestId(submitButton).should('exist')
 
@@ -237,7 +237,7 @@ describe('KDateTimePicker', () => {
 
     // Click on "6 hours", check whether selected class is applied
     cy.getTestId('select-timeframe-21600000').click()
-    cy.get('.k-popover-content').find('.timeframe-button.primary').should('contain.text', '6 hours')
+    cy.get('.popover-content').find('.timeframe-button.primary').should('contain.text', '6 hours')
   })
 
   it('renders custom calendar and relative time frames', { includeShadowDom: false }, () => {
diff --git a/src/components/KDateTimePicker/KDateTimePicker.vue b/src/components/KDateTimePicker/KDateTimePicker.vue
index af65de1223..2802e740c4 100644
--- a/src/components/KDateTimePicker/KDateTimePicker.vue
+++ b/src/components/KDateTimePicker/KDateTimePicker.vue
@@ -8,11 +8,12 @@
     <KPop
       :disabled="disabled"
       hide-caret
+      hide-close-icon
       :hide-popover="state.hidePopover"
       :placement="popoverPlacement"
       position-fixed
       width="auto"
-      @opened="state.hidePopover = false"
+      @open="state.hidePopover = false"
     >
       <div
         class="datetime-picker-trigger-wrapper"
@@ -650,7 +651,7 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
     overflow: hidden;
     padding: var(--kui-space-40, $kui-space-40);
 
-    .k-popover-content {
+    .popover-content {
       .datetime-picker-toggle {
         margin-bottom: var(--kui-space-40, $kui-space-40);
       }
@@ -701,7 +702,7 @@ $kDateTimePickerInputPaddingY: var(--kui-space-40, $kui-space-40); // correspond
       }
     }
 
-    .k-popover-footer {
+    .popover-footer {
       margin: var(--kui-space-0, $kui-space-0);
       margin-top: var(--kui-space-40, $kui-space-40);
 
diff --git a/src/components/KDropdown/KDropdown.vue b/src/components/KDropdown/KDropdown.vue
index 8abc140dd8..455840fcb6 100644
--- a/src/components/KDropdown/KDropdown.vue
+++ b/src/components/KDropdown/KDropdown.vue
@@ -6,11 +6,13 @@
     <KToggle v-slot="{ toggle, isToggled }">
       <KPop
         v-bind="boundKPopAttributes"
+        :close-on-popover-click="!isToggled.value"
         data-testid="k-dropdown-popover"
+        hide-close-icon
         :hide-popover="hidePopover"
-        :on-popover-click="() => handleTriggerToggle(isToggled, toggle, false)"
-        @closed="() => handleTriggerToggle(isToggled, toggle, false)"
-        @opened="() => handleTriggerToggle(isToggled, toggle, true)"
+        @close="() => handleTriggerToggle(isToggled, toggle, false)"
+        @open="() => handleTriggerToggle(isToggled, toggle, true)"
+        @popover-click="() => handleTriggerToggle(isToggled, toggle, false)"
       >
         <component
           :is="tooltipComponent"
@@ -211,14 +213,12 @@ const handleCloseDropdown = async (): Promise<void> => {
   })
 }
 
-const handleTriggerToggle = (isToggled: Ref<boolean>, toggle: () => void, isOpen: boolean): boolean => {
+const handleTriggerToggle = (isToggled: Ref<boolean>, toggle: () => void, isOpen: boolean): void => {
   // avoid toggling twice for the same event
   if (isToggled.value !== isOpen) {
     toggle()
     emit('toggleDropdown', isToggled.value)
   }
-
-  return isToggled.value
 }
 
 watch(selectedItem, (newVal, oldVal): void => {
diff --git a/src/components/KMultiselect/KMultiselect.vue b/src/components/KMultiselect/KMultiselect.vue
index 1ddf7cfd7a..a640d9968a 100644
--- a/src/components/KMultiselect/KMultiselect.vue
+++ b/src/components/KMultiselect/KMultiselect.vue
@@ -24,14 +24,12 @@
       <KToggle v-slot="{ isToggled, toggle }">
         <KPop
           ref="popper"
+          hide-close-icon
           v-bind="boundKPopAttributes"
-          :on-popover-click="() => {
-            return
-          }"
           :position-fixed="positionFixed"
           :target="`[id='${multiselectWrapperId}']`"
-          @closed="() => handleToggle(false, isToggled, toggle)"
-          @opened="() => handleToggle(true, isToggled, toggle)"
+          @close="() => handleToggle(false, isToggled, toggle)"
+          @open="() => handleToggle(true, isToggled, toggle)"
         >
           <div
             :id="multiselectWrapperId"
@@ -583,7 +581,7 @@ const createKPopAttributes = computed(() => {
   }
 })
 
-// Calculate the `.k-popover-content` max-height
+// Calculate the `.popover-content` max-height
 const popoverContentMaxHeight = computed((): string => getSizeFromString(props.dropdownMaxHeight))
 
 // TypeScript complains if I bind the original object
@@ -1115,7 +1113,7 @@ $kMultiselectInputHelpTextHeight: var(--kui-line-height-20, $kui-line-height-20)
   .hidden-selection-count-tooltip {
     cursor: pointer;
 
-    :deep(.k-popover-content) {
+    :deep(.popover-content) {
       @include truncate(3);
     }
   }
@@ -1197,7 +1195,7 @@ $kMultiselectInputHelpTextHeight: var(--kui-line-height-20, $kui-line-height-20)
       padding-bottom: var(--kui-space-0, $kui-space-0);
     }
 
-    .k-popover-content {
+    .popover-content {
       @include kMultiselectPopoverMaxHeight;
 
       // when dropdown footer text position is sticky
diff --git a/src/components/KPagination/KPagination.vue b/src/components/KPagination/KPagination.vue
index 403841904b..5e53b2f3b6 100644
--- a/src/components/KPagination/KPagination.vue
+++ b/src/components/KPagination/KPagination.vue
@@ -420,7 +420,7 @@ watch(pageCount, (newVal, oldVal) => {
     .page-size-dropdown {
       margin-left: var(--kui-space-30, $kui-space-30);
 
-      :deep(.k-popover-content) {
+      :deep(.popover-content) {
         max-height: 200px;
         overflow-y: auto;
       }
diff --git a/src/components/KPop/KPop.cy.ts b/src/components/KPop/KPop.cy.ts
index c77a1d8248..914bc68569 100644
--- a/src/components/KPop/KPop.cy.ts
+++ b/src/components/KPop/KPop.cy.ts
@@ -2,14 +2,6 @@ import { mount } from 'cypress/vue'
 import KPop from '@/components/KPop/KPop.vue'
 import { h } from 'vue'
 
-/**
- * ALL TESTS MUST USE testMode: true
- * We generate unique IDs for reference by aria properties. Test mode strips these out
- * allowing for successful snapshot verification.
- * props: {
- *   testMode: true
- * }
- */
 describe('KPop', () => {
   it('renders props when passed', () => {
     const popButtonText = 'Click Me!'
@@ -17,45 +9,39 @@ describe('KPop', () => {
 
     mount(KPop, {
       props: {
-        testMode: true,
         buttonText: popButtonText,
         title: popTitle,
       },
     })
 
-    cy.get('[data-testid="kpop-button"]').should('contain.html', popButtonText)
-    cy.get('.k-popover-title').should('contain.html', popTitle)
+    cy.get('[data-testid="popover-button"]').should('contain.html', popButtonText)
+    cy.get('.popover-title').should('contain.html', popTitle)
   })
 
   it('renders slots when passed', () => {
     const popTitle = 'Look Mah!'
-    const popActions = 'Pop Actions'
     const popContent = 'Pop Content'
     const popFooter = 'Pop Footer'
 
     mount(KPop, {
       props: {
-        testMode: true,
       },
       slots: {
         title: () => h('span', {}, popTitle),
-        actions: h('span', {}, popActions),
         content: h('span', {}, popContent),
         footer: h('span', {}, popFooter),
       },
     })
 
-    cy.get('.k-popover-title').should('contain.html', popTitle)
-    cy.get('.k-popover-actions').should('contain.html', popActions)
-    cy.get('.k-popover-content').should('contain.html', popContent)
-    cy.get('.k-popover-footer').should('contain.html', popFooter)
+    cy.get('.popover-title').should('contain.html', popTitle)
+    cy.get('.popover-content').should('contain.html', popContent)
+    cy.get('.popover-footer').should('contain.html', popFooter)
   })
 
   it('renders with correct px width', () => {
     const width = 300
     mount(KPop, {
       props: {
-        testMode: true,
         width: width + '',
       },
       slots: {
@@ -70,26 +56,23 @@ describe('KPop', () => {
     const title = 'Cool Beans!'
     mount(KPop, {
       props: {
-        testMode: true,
         title,
       },
     })
-    cy.get('.k-popover-title').should('have.text', title)
+    cy.get('.popover-title').should('have.text', title)
   })
 
   it('has no title if no prop', () => {
     mount(KPop, {
       props: {
-        testMode: true,
       },
     })
-    cy.get('.k-popover-title').should('not.exist')
+    cy.get('.popover-title').should('not.exist')
   })
 
   it('shows element on click', () => {
     mount(KPop, {
       props: {
-        testMode: true,
         title: 'Popover Title',
       },
       slots: {
@@ -105,7 +88,6 @@ describe('KPop', () => {
   it('shows element on hover', () => {
     mount(KPop, {
       props: {
-        testMode: true,
         title: 'Popover Title',
         trigger: 'hover',
       },
@@ -134,4 +116,30 @@ describe('KPop', () => {
 
     cy.get('.k-popover').should('have.css', 'z-index', '2200')
   })
+
+  it('does not render close icon when prop is false', () => {
+    mount(KPop, {
+      props: {
+        hideCloseIcon: true,
+      },
+    })
+
+    cy.get('.popover-close-button').should('not.exist')
+  })
+
+  it('closes popover when close button is clicked', () => {
+    mount(KPop, {
+      props: {
+        title: 'Popover Title',
+      },
+      slots: {
+        default: () => h('div', { class: ['slottedEl'] }, 'Slotted element'),
+      },
+    })
+
+    cy.get('.slottedEl').click()
+    cy.get('.k-popover').should('be.visible')
+    cy.get('.popover-close-button').click()
+    cy.get('.k-popover').should('not.be.visible')
+  })
 })
diff --git a/src/components/KPop/KPop.vue b/src/components/KPop/KPop.vue
index 2c4637f387..e4f5595c97 100644
--- a/src/components/KPop/KPop.vue
+++ b/src/components/KPop/KPop.vue
@@ -1,7 +1,7 @@
 <template>
   <component
     :is="tag"
-    :id="$slots.default ? targetId : null"
+    :id="targetId"
     ref="root"
     :aria-controls="$slots.default ? popoverId : undefined"
     :aria-expanded="$slots.default ? (!!isOpen || undefined) : undefined"
@@ -11,101 +11,66 @@
   >
     <slot>
       <KButton
-        :id="targetId"
         :aria-controls="popoverId || undefined"
         :aria-expanded="!!isOpen || undefined"
-        data-testid="kpop-button"
+        data-testid="popover-button"
       >
         {{ buttonText }}
       </KButton>
     </slot>
-    <div
-      v-if="isSvg"
-    >
-      <foreignObject>
-        <div
-          v-show="isOpen"
-          :id="popoverId"
-          ref="popper"
-          class="k-popover"
-          :class="popoverClassObj"
-          role="region"
-          :style="popoverStyle"
-        >
-          <div
-            v-if="$slots.title || title || $slots.actions"
-            class="k-popover-header"
-          >
-            <div
-              v-if="$slots.title || title"
-              class="k-popover-title"
-            >
-              <slot name="title">
-                {{ title }}
-              </slot>
-            </div>
-            <div
-              v-if="$slots.actions"
-              class="k-popover-actions"
-            >
-              <slot name="actions" />
-            </div>
-          </div>
-          <div class="k-popover-content">
-            <slot name="content" />
-          </div>
-          <div
-            v-if="$slots.footer"
-            class="k-popover-footer"
-          >
-            <slot name="footer" />
-          </div>
-        </div>
-      </foreignObject>
-    </div>
-    <transition
-      v-else
-      name="fade"
-    >
+    <Transition name="kongponents-fade-transition">
       <div
         v-show="isOpen"
         :id="popoverId"
         ref="popper"
+        :aria-labelledby="$slots.title || title ? titleId : undefined"
         class="k-popover"
         :class="popoverClassObj"
-        role="region"
+        role="dialog"
         :style="popoverStyle"
       >
+        <!-- click on close button is handled by handleClick method -->
+        <button
+          v-if="!hideCloseIcon"
+          ref="popoverCloseButton"
+          class="popover-close-button"
+          :tabindex="isOpen ? 0 : -1"
+          type="button"
+        >
+          <CloseIcon
+            class="popover-close-icon"
+            :size="KUI_ICON_SIZE_30"
+          />
+        </button>
         <div
-          v-if="$slots.title || title || $slots.actions"
-          class="k-popover-header"
+          v-if="$slots.title || title"
+          class="popover-header"
         >
           <div
             v-if="$slots.title || title"
-            class="k-popover-title"
+            :id="titleId"
+            class="popover-title"
+            :class="{ 'close-icon-spacing': !hideCloseIcon }"
           >
             <slot name="title">
               {{ title }}
             </slot>
           </div>
-          <div
-            v-if="$slots.actions"
-            class="k-popover-actions"
-          >
-            <slot name="actions" />
-          </div>
         </div>
-        <div class="k-popover-content">
+        <div
+          class="popover-content"
+          :class="{ 'close-icon-spacing': !hideCloseIcon && !($slots.title || title) }"
+        >
           <slot name="content" />
         </div>
         <div
           v-if="$slots.footer"
-          class="k-popover-footer"
+          class="popover-footer"
         >
           <slot name="footer" />
         </div>
       </div>
-    </transition>
+    </Transition>
   </component>
 </template>
 
@@ -116,18 +81,20 @@
 // @ts-nocheck
 import type { PropType } from 'vue'
 import { defineComponent } from 'vue'
-import { v1 as uuidv1 } from 'uuid'
+import { v4 as uuidv4 } from 'uuid'
 import Popper from 'popper.js'
 import useUtilities from '@/composables/useUtilities'
 import KButton from '@/components/KButton/KButton.vue'
 import type { PopPlacements, PopTrigger } from '@/types'
 import { PopPlacementsArray, PopTriggerArray } from '@/types'
+import { CloseIcon } from '@kong/icons'
+import { KUI_ICON_SIZE_30 } from '@kong/design-tokens'
 
 const { getSizeFromString } = useUtilities()
 
 export default defineComponent({
   name: 'KPop',
-  components: { KButton },
+  components: { KButton, CloseIcon },
   expose: ['updatePopper'],
   props: {
     /**
@@ -150,7 +117,7 @@ export default defineComponent({
      */
     buttonText: {
       type: String,
-      default: 'OK',
+      default: '',
     },
     /**
      * The title of the Popover header
@@ -205,13 +172,6 @@ export default defineComponent({
       type: String,
       default: '',
     },
-    /**
-     * Custom transition names that will be applied to the popover
-     */
-    popoverTransitions: {
-      type: String,
-      default: 'fade',
-    },
     /**
     * Custom popover timeout setting
      */
@@ -233,13 +193,6 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    /**
-    * A flag indicating whether or not the element in the slot will be an SVG element
-    */
-    isSvg: {
-      type: Boolean,
-      default: false,
-    },
     /**
      * A flag to hide the triangle pointing to the trigger element
      */
@@ -248,25 +201,18 @@ export default defineComponent({
       default: false,
     },
     /**
-     * A custom callback function to call when the popover is already opened and an element inside has been clicked
+     * Whether popover should be closed when popover content is clicked
      */
-    onPopoverClick: {
-      type: Function,
-      default: null,
-    },
-    /**
-     * A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries.
-     */
-    positionFixed: {
+    closeOnPopoverClick: {
       type: Boolean,
       default: false,
     },
     /**
-     * Test mode - for testing only, strips out generated ids
+     * A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries.
      */
-    testMode: {
+    positionFixed: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     /**
      * z-index - to control z-index value of the popover
@@ -275,15 +221,21 @@ export default defineComponent({
       type: Number,
       default: 1000,
     },
+    hideCloseIcon: {
+      type: Boolean,
+      default: false,
+    },
   },
-  emits: ['opened', 'closed'],
+  emits: ['open', 'close', 'popover-click'],
   data() {
     return {
       popper: null,
       reference: null,
       isOpen: false,
-      popoverId: !this.testMode ? uuidv1() : 'test-popover-id-1234',
-      targetId: !this.testMode ? uuidv1() : 'test-target-id-1234',
+      popoverId: uuidv4(),
+      targetId: uuidv4(),
+      titleId: uuidv4(),
+      KUI_ICON_SIZE_30,
     }
   },
   computed: {
@@ -295,7 +247,7 @@ export default defineComponent({
       }
     },
     popoverClassObj: function() {
-      return [this.popoverClasses, { 'hide-caret': this.hideCaret }, { 'has-actions': this.$slots.actions }]
+      return [this.popoverClasses, { 'hide-caret': this.hideCaret }]
     },
   },
   watch: {
@@ -325,16 +277,25 @@ export default defineComponent({
   beforeUnmount() {
     const popper = this.$refs.popper
 
-    document.documentElement.removeEventListener('click', this.handleClick)
-    popper && popper.removeEventListener('click', this.showPopper)
+    if (document) {
+      document.documentElement.removeEventListener('click', this.handleClick)
+    }
+
+    if (popper) {
+      popper.removeEventListener('click', this.onPopperContentClick)
+      popper.removeEventListener('mouseenter', this.showPopper)
+      popper.removeEventListener('focusin', this.showPopper)
+      popper.removeEventListener('mouseleave', this.hidePopper)
+      popper.removeEventListener('focusout', this.hidePopper)
+    }
 
     if (this.reference) {
-      this.reference.removeEventListener('click', this.handleClick)
       this.reference.removeEventListener('mouseenter', this.createInstance)
       this.reference.removeEventListener('mouseleave', this.toggle)
       this.reference.removeEventListener('focus', this.createInstance)
       this.reference.removeEventListener('blur', this.toggle)
     }
+
     this.destroy()
   },
   methods: {
@@ -344,16 +305,23 @@ export default defineComponent({
       }
 
       this.timer = setTimeout(() => {
-        this.$emit('closed')
+        this.$emit('close')
         this.destroy()
       }, this.popoverTimeout)
     },
     showPopper() {
       if (this.disabled) return
-      this.isOpen = true
       if (this.timer) clearTimeout(this.timer)
       if (this.popperTimer) clearTimeout(this.popperTimer)
-      this.$emit('opened')
+      if (!this.isOpen) {
+        this.isOpen = true
+        this.$emit('open')
+      }
+    },
+    onPopperContentClick(e) {
+      if (e.target !== this.$refs.popoverCloseButton) {
+        this.$emit('popover-click')
+      }
     },
     updatePopper() {
       if (this.popper && typeof this.popper.update === 'function') {
@@ -366,9 +334,12 @@ export default defineComponent({
       this.showPopper()
       const placement = (this.placement || 'auto').replace(/[A-Z]/g, '-$&').toLowerCase()
       const popperEl = this.$refs.popper
-      const theTarget = (this.target && !this.isSvg && !!document.querySelector(this.target))
-        ? document.querySelector(this.target)
-        : document.getElementById(this.targetId)
+      let theTarget = null
+      if (document) {
+        theTarget = (this.target && !!document.querySelector(this.target))
+          ? document.querySelector(this.target)
+          : document.getElementById(this.targetId)
+      }
 
       if (theTarget) {
         theTarget.appendChild(popperEl)
@@ -403,20 +374,24 @@ export default defineComponent({
         this.hidePopper()
       }
 
-      if (this.reference && this.reference.contains(e.target)) {
+      if (e.target === this.$refs.popoverCloseButton) {
+        hidePopperAndStopPropagation()
+      }
+
+      if (this.reference && this.reference.contains(e.target) && (this.$refs.popper && !this.$refs.popper.contains(e.target))) {
+        // If the click is on or within the trigger element and not on the popover element
         if (this.isOpen) {
           hidePopperAndStopPropagation()
         } else {
           this.createInstance()
         }
-      } else if (this.$refs.popper && this.$refs.popper.contains(e.target) && this.onPopoverClick) {
-        const isOpen = this.onPopoverClick()
-        if (isOpen !== undefined) {
-          isOpen ? this.showPopper() : hidePopperAndStopPropagation()
-        }
       } else if (this.$refs.popper && this.$refs.popper.contains(e.target)) {
-        this.showPopper()
+        // If the click is on or within the popover element
+        if (this.closeOnPopoverClick) {
+          hidePopperAndStopPropagation()
+        }
       } else if (this.isOpen) {
+        // Click outside
         hidePopperAndStopPropagation()
       }
     },
@@ -429,12 +404,17 @@ export default defineComponent({
           this.reference.addEventListener('mouseleave', this.hidePopper)
           this.reference.addEventListener('blur', this.hidePopper)
           popper.addEventListener('mouseenter', this.showPopper)
-          popper.addEventListener('focus', this.showPopper)
+          // this is important event listener that allows to keyboard navigate through the popover without closing it
+          popper.addEventListener('focusin', this.showPopper)
           popper.addEventListener('mouseleave', this.hidePopper)
-          popper.addEventListener('blur', this.hidePopper)
+          // has to come in pair with focusin
+          popper.addEventListener('focusout', this.hidePopper)
         }
 
-        popper.addEventListener('click', this.showPopper)
+        popper.addEventListener('click', this.onPopperContentClick)
+      }
+
+      if (document) {
         document.documentElement.addEventListener('click', this.handleClick)
       }
     },
@@ -449,192 +429,221 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-// Must leave this block unscoped as it sometimes causes issues with slotted/nested styles
+<style lang="scss" scoped>
+/* Component variables */
+
+$kPopCaretSize: 10px;
+$kPopCaretShadowElementSize: 11px;
+$kPopCaretOffset: 16px;
 
-@import '@/styles/tmp-variables';
+/* Component mixins */
 
-.k-popover {
+@mixin kPopCaret {
+  &:after, &:before {
+    border: solid var(--kui-color-border-transparent, $kui-color-border-transparent);
+    content: " ";
+    height: 0;
+    pointer-events: none;
+    position: absolute;
+    width: 0;
+  }
+
+  &:after {
+    border-width: $kPopCaretSize;
+    margin-left: calc($kPopCaretSize * -1);
+  }
+
+  &:before {
+    border-width: $kPopCaretShadowElementSize;
+    margin-left: calc($kPopCaretShadowElementSize * -1);
+  }
+}
+
+/* Component styles */
+
+.k-popover, :deep(.k-popover) {
   background-color: var(--kui-color-background, $kui-color-background);
-  border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border-neutral-weak, $kui-color-border-neutral-weak);
-  border-radius: var(--kui-border-radius-10, $kui-border-radius-10);
-  -webkit-box-shadow: 0px 4px 20px $tmp-color-black-10;
-  box-shadow: 0px 4px 20px $tmp-color-black-10;
-  color: var(--kui-color-text-neutral, $kui-color-text-neutral);
-  font-size: var(--kui-font-size-30, $kui-font-size-30);
+  border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+  border-radius: var(--kui-border-radius-30, $kui-border-radius-30);
+  box-shadow: var(--kui-shadow, $kui-shadow);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--kui-font-family-text, $kui-font-family-text);
+  gap: var(--kui-space-40, $kui-space-40);
   max-width: none;
-  padding: var(--kui-space-80, $kui-space-80) var(--kui-space-60, $kui-space-60);
+  padding: var(--kui-space-60, $kui-space-60);
+  position: relative;
   text-align: left;
   white-space: normal;
   z-index: v-bind('zIndex');
 
-  // Prevent Vue animation classes from impacting the positioning of the popover
-  &.fade-enter-active,
-  &.fade-enter-to,
-  &.fade-leave-active,
-  &.fade-leave-to {
-    animation: none !important;
+  .popover-close-button {
+    @include defaultButtonReset;
+
+    border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
+    color: var(--kui-color-text-neutral, $kui-color-text-neutral);
+    margin: var(--kui-space-60, $kui-space-60) var(--kui-space-60, $kui-space-60) var(--kui-space-0, $kui-space-0) var(--kui-space-0, $kui-space-0);
+    outline: none;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    &:hover, &:focus {
+      color: var(--kui-color-text-neutral-strong, $kui-color-text-neutral-strong) !important;
+    }
+
+    &:focus-visible {
+      box-shadow: var(--kui-shadow-focus, $kui-shadow-focus);
+    }
+
+    .popover-close-icon {
+      pointer-events: none;
+    }
   }
 
-  .k-popover-header {
+  .popover-header {
     align-items: baseline;
-    display: flex !important;
-    margin-bottom: var(--kui-space-80, $kui-space-80);
+    display: flex;
 
-    .k-popover-title {
+    .popover-title {
       color: var(--kui-color-text, $kui-color-text);
       font-size: var(--kui-font-size-40, $kui-font-size-40);
-      font-weight: var(--kui-font-weight-semibold, $kui-font-weight-semibold);
-    }
+      font-weight: var(--kui-font-weight-bold, $kui-font-weight-bold);
+      line-height: var(--kui-line-height-30, $kui-line-height-30);
 
-    .k-popover-actions {
-      margin-left: auto;
+      &.close-icon-spacing {
+        margin-right: var(--kui-space-60, $kui-space-60);
+      }
     }
   }
 
-  .k-popover-content {
-    line-height: var(--kui-line-height-30, $kui-line-height-30);
+  .popover-content {
+    color: var(--kui-color-text-neutral-stronger, $kui-color-text-neutral-stronger);
+    font-size: var(--kui-font-size-20, $kui-font-size-20);
+    font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
+    line-height: var(--kui-line-height-20, $kui-line-height-20);
+
+    &.close-icon-spacing {
+      margin-right: var(--kui-space-60, $kui-space-60);
+    }
   }
 
-  .k-popover-footer {
-    margin: var(--kui-space-50, $kui-space-50) var(--kui-space-0, $kui-space-0);
+  .popover-footer {
+    align-items: center;
+    display: flex;
+    gap: var(--kui-space-40, $kui-space-40);
   }
 
-  // TODO: this block is repetitive and can be refactored inti a mixin
+  // placement and caret styles
+
   &[x-placement^="bottom"] {
     margin-top: var(--kui-space-50, $kui-space-50);
 
+    @include kPopCaret;
+
     &:after, &:before {
-      border: solid var(--kui-color-border-transparent, $kui-color-border-transparent);
       bottom: 100%;
-      content: " ";
-      height: 0;
       left: 50%;
-      pointer-events: none;
-      position: absolute;
-      width: 0;
     }
 
     &:after {
-      border-color: rgba(255, 255, 255, 0);
-      border-bottom-color: $tmp-color-white;
-      border-width: 10px;
-      margin-left: -10px;
+      /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+      border-bottom-color: var(--kui-color-background, $kui-color-background);
     }
 
     &:before {
-      border-color: rgba(250, 250, 250, 0);
-      border-bottom-color: $tmp-color-black-10;
-      border-width: 11px;
-      margin-left: -11px;
+      border-bottom-color: var(--kui-color-border, $kui-color-border);
     }
   }
 
   &[x-placement^="top"] {
     margin-bottom: var(--kui-space-60, $kui-space-60);
 
+    @include kPopCaret;
+
     &:after, &:before {
-      border: solid var(--kui-color-border-transparent, $kui-color-border-transparent);
-      content: " ";
-      height: 0;
       left: 50%;
-      pointer-events: none;
-      position: absolute;
       top: 100%;
-      width: 0;
     }
 
     &:after {
-      border-color: rgba(255, 255, 255, 0);
-      border-top-color: $tmp-color-white;
-      border-width: 10px;
-      margin-left: -10px;
+      /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+      border-top-color: var(--kui-color-background, $kui-color-background);
     }
 
     &:before {
-      border-color: rgba(250, 250, 250, 0);
-      border-top-color: $tmp-color-black-10;
-      border-width: 11px;
-      margin-left: -11px;
+      border-top-color: var(--kui-color-border, $kui-color-border);
     }
   }
 
   &[x-placement^="left"] {
     margin-right: var(--kui-space-60, $kui-space-60);
 
+    @include kPopCaret;
+
     &:after, &:before {
-      border: solid var(--kui-color-border-transparent, $kui-color-border-transparent);
-      content: " ";
-      height: 0;
       left: 100%;
-      pointer-events: none;
-      position: absolute;
       top: 50%;
-      width: 0;
+      transform: translate(50%, -50%);
     }
 
     &:after {
-      border-color: rgba(255, 255, 255, 0);
-      border-left-color: $tmp-color-white;
-      border-width: 10px;
-      margin-top: -10px;
+      /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+      border-left-color: var(--kui-color-background, $kui-color-background);
     }
 
     &:before {
-      border-color: rgba(250, 250, 250, 0);
-      border-left-color: $tmp-color-black-10;
-      border-width: 11px;
-      margin-top: -11px;
+      border-left-color: var(--kui-color-border, $kui-color-border);
     }
   }
 
   &[x-placement^="right"] {
     margin-left: var(--kui-space-60, $kui-space-60);
 
+    @include kPopCaret;
+
     &:after, &:before {
-      border: solid var(--kui-color-border-transparent, $kui-color-border-transparent);
-      content: " ";
-      height: 0;
-      pointer-events: none;
-      position: absolute;
       right: 100%;
       top: 50%;
-      width: 0;
+      transform: translateY(-50%);
     }
 
     &:after {
-      border-color: rgba(255, 255, 255, 0);
-      border-right-color: $tmp-color-white;
-      border-width: 10px;
-      margin-top: -10px;
+      /* stylelint-disable-next-line @kong/design-tokens/use-proper-token */
+      border-right-color: var(--kui-color-background, $kui-color-background);
     }
 
     &:before {
-      border-color: rgba(250, 250, 250, 0);
-      border-right-color: $tmp-color-black-10;
-      border-width: 11px;
-      margin-top: -11px;
+      border-right-color: var(--kui-color-border, $kui-color-border);
     }
   }
 
   &[x-placement^="top-start"],
   &[x-placement^="bottom-start"] {
-    &:after, &:before { left: 11px; }
+    &:after, &:before {
+      left: $kPopCaretOffset;
+    }
   }
 
   &[x-placement^="top-end"],
   &[x-placement^="bottom-end"] {
-    &:after, &:before { left: calc(100% - 11px); }
+    &:after, &:before {
+      left: calc(100% - $kPopCaretOffset);
+    }
   }
 
   &[x-placement^="right-start"],
   &[x-placement^="left-start"] {
-    &:after, &:before { top: 11px; }
+    &:after, &:before {
+      top: $kPopCaretOffset;
+    }
   }
 
   &[x-placement^="right-end"],
   &[x-placement^="left-end"] {
-    &:after, &:before { top: calc(100% - 11px); }
+    &:after, &:before {
+      top: calc(100% - $kPopCaretOffset);
+    }
   }
 
   &.hide-caret {
@@ -643,47 +652,5 @@ export default defineComponent({
       display: none;
     }
   }
-
-  &.has-actions {
-    padding-bottom: var(--kui-space-0, $kui-space-0) !important;
-  }
-}
-</style>
-
-<style lang="scss">
-@import '@/styles/tmp-variables';
-// @keyframes animations need to be un-scoped
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-.fade-enter-active,
-.fadeIn,
-.fade-leave-active,
-.fadeOut {
-  animation-duration: $tmp-animation-timing-2;
-  animation-fill-mode: both;
-}
-.fade-enter-active,
-.fadeIn {
-  animation-name: fadeIn;
-}
-.fade-leave-active,
-.fadeOut {
-  animation-name: fadeOut;
 }
 </style>
diff --git a/src/components/KSelect/KSelect.vue b/src/components/KSelect/KSelect.vue
index 4954112e7b..3929f59681 100644
--- a/src/components/KSelect/KSelect.vue
+++ b/src/components/KSelect/KSelect.vue
@@ -24,11 +24,13 @@
       <KPop
         ref="popperElement"
         v-bind="boundKPopAttributes"
-        :on-popover-click="() => onPopoverClick(toggle, isToggled.value)"
+        close-on-popover-click
+        hide-close-icon
         :position-fixed="positionFixed"
         :target="`[id='${selectWrapperId}']`"
-        @closed="() => onClose(toggle, isToggled.value)"
-        @opened="() => onOpen(toggle)"
+        @close="() => onClose(toggle, isToggled.value)"
+        @open="() => onOpen(toggle)"
+        @popover-click="() => onPopoverClick(toggle)"
       >
         <div
           :id="selectWrapperId"
@@ -434,7 +436,7 @@ const createKPopAttributes = computed(() => {
   }
 })
 
-// Calculate the `.k-popover-content` max-height
+// Calculate the `.popover-content` max-height
 const popoverContentMaxHeight = computed((): string => getSizeFromString(props.dropdownMaxHeight))
 
 // TypeScript complains if I bind the original object
@@ -571,10 +573,8 @@ const onSelectWrapperClick = (event: Event): void => {
   }
 }
 
-const onPopoverClick = (toggle: Function, isToggled: boolean) => {
+const onPopoverClick = (toggle: Function) => {
   toggle()
-
-  return isToggled
 }
 
 const onClose = (toggle: Function, isToggled: boolean) => {
diff --git a/src/components/KTable/KTable.vue b/src/components/KTable/KTable.vue
index 8ac4405161..ff22622b6f 100644
--- a/src/components/KTable/KTable.vue
+++ b/src/components/KTable/KTable.vue
@@ -633,7 +633,7 @@ const tdlisteners = computed((): any => {
         }
 
         // check parent for popover class
-        if (e.target.closest('.k-popover-content') !== null) {
+        if (e.target.closest('.popover-content') !== null) {
           isPopoverContent = true
         }
 
diff --git a/src/components/KTooltip/KTooltip.vue b/src/components/KTooltip/KTooltip.vue
index 4e46c61d86..0486e5a1b6 100644
--- a/src/components/KTooltip/KTooltip.vue
+++ b/src/components/KTooltip/KTooltip.vue
@@ -3,6 +3,7 @@
     v-if="showTooltip"
     v-bind="$attrs"
     hide-caret
+    hide-close-icon
     :max-width="maxWidth"
     :placement="placement"
     :popover-classes="`k-tooltip ${computedClass}`"
@@ -126,14 +127,37 @@ const computedClass = computed((): string => {
   background-color: var(--kui-color-background-inverse, $kui-color-background-inverse);
   border: none;
   border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
-  color: var(--kui-color-text-inverse, $kui-color-text-inverse);
-  font-family: var(--kui-font-family-text, $kui-font-family-text);
-  font-size: var(--kui-font-size-20, $kui-font-size-20);
-  font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium);
-  line-height: var(--kui-line-height-20, $kui-line-height-20);
   padding: var(--kui-space-30, $kui-space-30);
   z-index: v-bind('zIndex');
 
+  .popover-content {
+    color: var(--kui-color-text-inverse, $kui-color-text-inverse);
+    font-family: var(--kui-font-family-text, $kui-font-family-text);
+    font-size: var(--kui-font-size-20, $kui-font-size-20);
+    font-weight: var(--kui-font-weight-medium, $kui-font-weight-medium);
+    line-height: var(--kui-line-height-20, $kui-line-height-20);
+
+    code {
+      color: var(--kui-color-text-decorative-aqua, $kui-color-text-decorative-aqua);
+    }
+
+    a {
+      color: var(--kui-color-text-inverse, $kui-color-text-inverse);
+
+      &:hover {
+        color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker);
+      }
+
+      &:focus-visible {
+        color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
+      }
+
+      &:active {
+        color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
+      }
+    }
+  }
+
   &.tooltip-top {
     margin-bottom: var(--kui-space-20, $kui-space-20);
   }
@@ -149,25 +173,5 @@ const computedClass = computed((): string => {
   &.tooltip-left {
     margin-right: var(--kui-space-20, $kui-space-20);
   }
-
-  code {
-    color: var(--kui-color-text-decorative-aqua, $kui-color-text-decorative-aqua);
-  }
-
-  a {
-    color: var(--kui-color-text-inverse, $kui-color-text-inverse);
-
-    &:hover {
-      color: var(--kui-color-text-neutral-weaker, $kui-color-text-neutral-weaker);
-    }
-
-    &:focus-visible {
-      color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
-    }
-
-    &:active {
-      color: var(--kui-color-text-neutral-weak, $kui-color-text-neutral-weak);
-    }
-  }
 }
 </style>