docs(popover): update

docs/app/components/content/examples/popover/PopoverOpenExample.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const open = ref(false)
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+</script>
+
+<template>
+  <UPopover v-model:open="open">
+    <UButton label="Open" color="gray" variant="subtle" />
+
+    <template #content>
+      <Placeholder class="size-48 m-4 inline-flex" />
+    </template>
+  </UPopover>
+</template>

docs/app/components/content/examples/tooltip/TooltipOpenExample.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const open = ref(true)
+const open = ref(false)
 
 defineShortcuts({
   o: () => open.value = !open.value
@@ -8,6 +8,6 @@ defineShortcuts({
 
 <template>
   <UTooltip v-model:open="open" text="Open on GitHub">
-    <UButton icon="i-simple-icons-github" />
+    <UButton label="Open" color="gray" variant="subtle" />
   </UTooltip>
 </template>

docs/content/3.components/popover.md

@@ -7,15 +7,182 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Popover.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
 
+Use a [Button](/components/button) or any other component in the default slot of the Popover.
+
+Then, use the `#content` slot to add the content displayed when the Popover is open.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  content: |
+
+    <Placeholder class="size-48 m-4 inline-flex" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#content
+:placeholder{class="size-48 m-4 inline-flex"}
+::
+
+### Mode
+
+Use the `mode` prop to change the mode of the Popover. Defaults to `click`.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+items:
+  mode:
+    - click
+    - hover
+props:
+  mode: 'hover'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  content: |
+
+    <Placeholder class="size-48 m-4 inline-flex" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#content
+:placeholder{class="size-48 m-4 inline-flex"}
+::
+
+::note
+When using the `hover` mode, the Radix Vue [HoverCard](https://www.radix-vue.com/components/hover-card.html) component is used instead of the [Popover](https://www.radix-vue.com/components/popover.html).
+::
+
+### Delay
+
+When using the `hover` mode, you can use the `open-delay` and `close-delay` props to control the delay before the Popover is opened or closed.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+ignore:
+  - mode
+props:
+  mode: 'hover'
+  openDelay: 500
+  closeDelay: 300
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  content: |
+
+    <Placeholder class="size-48 m-4 inline-flex" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#content
+:placeholder{class="size-48 m-4 inline-flex"}
+::
+
+### Content
+
+Use the `content` prop to control how the Popover content is rendered, like its `align` or `side` for example.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+items:
+  content.align:
+    - start
+    - center
+    - end
+  content.side:
+    - right
+    - left
+    - top
+    - bottom
+props:
+  content:
+    align: center
+    side: bottom
+    sideOffset: 8
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  content: |
+
+    <Placeholder class="size-48 m-4 inline-flex" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#content
+:placeholder{class="size-48 m-4 inline-flex"}
+::
+
+### Arrow
+
+Use the `arrow` prop to display an arrow on the Popover.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+ignore:
+  - arrow
+props:
+  arrow: true
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  content: |
+
+    <Placeholder class="size-48 m-4 inline-flex" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#content
+:placeholder{class="size-48 m-4 inline-flex"}
+::
+
 ## Examples
 
+### Control open state
+
+You can control the open state by using the `default-open` prop or the `v-model:open` directive.
+
+::component-example
+---
+name: 'popover-open-example'
+class: 'justify-center'
+---
+::
+
+::note
+In this example, press :kbd{value="O"} to toggle the Popover.
+::
+
 ## API
 
 ### Props

docs/content/3.components/tooltip.md

@@ -24,15 +24,16 @@ Use the `text` prop to set the content of the Tooltip.
 ::component-code
 ---
 prettier: true
+class: 'justify-center'
 props:
   text: 'Open on GitHub'
 slots:
   default: |
 
-    <UButton icon="i-simple-icons-github" />
+    <UButton label="Open" color="gray" variant="subtle" />
 ---
 
-:u-button{icon="i-simple-icons-github"}
+:u-button{label="Open" color="gray" variant="subtle"}
 ::
 
 ### Kbds
@@ -53,10 +54,10 @@ props:
 slots:
   default: |
 
-    <UButton icon="i-simple-icons-github" />
+    <UButton label="Open" color="gray" variant="subtle" />
 ---
 
-:u-button{icon="i-simple-icons-github"}
+:u-button{label="Open" color="gray" variant="subtle"}
 ::
 
 ::tip
@@ -70,6 +71,7 @@ Use the `delay-duration` prop to change the delay before the Tooltip appears. Fo
 ::component-code
 ---
 prettier: true
+class: 'justify-center'
 ignore:
   - text
 props:
@@ -78,10 +80,10 @@ props:
 slots:
   default: |
 
-    <UButton icon="i-simple-icons-github" />
+    <UButton label="Open" color="gray" variant="subtle" />
 ---
 
-:u-button{icon="i-simple-icons-github"}
+:u-button{label="Open" color="gray" variant="subtle"}
 ::
 
 ::tip
@@ -95,6 +97,7 @@ Use the `content` prop to control how the Tooltip content is rendered, like its
 ::component-code
 ---
 prettier: true
+class: 'justify-center'
 ignore:
   - text
 items:
@@ -116,10 +119,10 @@ props:
 slots:
   default: |
 
-    <UButton icon="i-simple-icons-github" />
+    <UButton label="Open" color="gray" variant="subtle" />
 ---
 
-:u-button{icon="i-simple-icons-github"}
+:u-button{label="Open" color="gray" variant="subtle"}
 ::
 
 ### Arrow
@@ -129,6 +132,7 @@ Use the `arrow` prop to display an arrow on the Tooltip.
 ::component-code
 ---
 prettier: true
+class: 'justify-center'
 ignore:
   - text
   - arrow
@@ -138,10 +142,10 @@ props:
 slots:
   default: |
 
-    <UButton icon="i-simple-icons-github" />
+    <UButton label="Open" color="gray" variant="subtle" />
 ---
 
-:u-button{icon="i-simple-icons-github"}
+:u-button{label="Open" color="gray" variant="subtle"}
 ::
 
 ### Disabled
@@ -151,6 +155,7 @@ Use the `disabled` prop to disable the Tooltip.
 ::component-code
 ---
 prettier: true
+class: 'justify-center'
 ignore:
   - text
 props:
@@ -159,10 +164,10 @@ props:
 slots:
   default: |
 
-    <UButton icon="i-simple-icons-github" />
+    <UButton label="Open" color="gray" variant="subtle" />
 ---
 
-:u-button{icon="i-simple-icons-github"}
+:u-button{label="Open" color="gray" variant="subtle"}
 ::
 
 ## Examples
@@ -171,7 +176,12 @@ slots:
 
 You can control the open state by using the `default-open` prop or the `v-model:open` directive.
 
-:component-example{name="tooltip-open-example"}
+::component-example
+---
+name: 'tooltip-open-example'
+class: 'justify-center'
+---
+::
 
 ::note
 In this example, press :kbd{value="O"} to toggle the Tooltip.

docs/nuxt.config.ts

@@ -136,6 +136,7 @@ export default defineNuxtConfig({
         'UKbd',
         'ULink',
         'UModal',
+        'UPopover',
         'UProgress',
         'URadioGroup',
         'USlider',