From e37d632b78d76da9c9479516a15044f1bb444c00 Mon Sep 17 00:00:00 2001 From: Conner Blanton Date: Wed, 25 Oct 2023 21:42:55 -0500 Subject: [PATCH 1/4] feat(Tooltip): option to add popper arrow --- src/runtime/components/overlays/Tooltip.vue | 5 +++++ src/runtime/composables/usePopper.ts | 8 +++++++- src/runtime/types/popper.d.ts | 1 + src/runtime/ui.config.ts | 12 ++++++++++-- 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/runtime/components/overlays/Tooltip.vue b/src/runtime/components/overlays/Tooltip.vue index bda34efcb9..b3507f459f 100644 --- a/src/runtime/components/overlays/Tooltip.vue +++ b/src/runtime/components/overlays/Tooltip.vue @@ -5,6 +5,9 @@
+ +
+
@@ -127,6 +130,8 @@ export default defineComponent({ // eslint-disable-next-line vue/no-dupe-keys ui, attrs, + // eslint-disable-next-line vue/no-dupe-keys + popper, trigger, container, open, diff --git a/src/runtime/composables/usePopper.ts b/src/runtime/composables/usePopper.ts index ffc2f17451..04ae43b5f0 100644 --- a/src/runtime/composables/usePopper.ts +++ b/src/runtime/composables/usePopper.ts @@ -8,12 +8,13 @@ import offset from '@popperjs/core/lib/modifiers/offset' import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow' import computeStyles from '@popperjs/core/lib/modifiers/computeStyles' import eventListeners from '@popperjs/core/lib/modifiers/eventListeners' +import arrowModifier from '@popperjs/core/lib/modifiers/arrow' import { unrefElement } from '@vueuse/core' import type { MaybeElement } from '@vueuse/core' import type { PopperOptions } from '../types/popper' export const createPopper = popperGenerator({ - defaultModifiers: [...defaultModifiers, offset, flip, preventOverflow, computeStyles, eventListeners] + defaultModifiers: [...defaultModifiers, offset, flip, preventOverflow, computeStyles, eventListeners, arrowModifier] }) export function usePopper ({ @@ -25,6 +26,7 @@ export function usePopper ({ adaptive = true, scroll = true, resize = true, + arrow = false, placement, strategy }: PopperOptions, virtualReference?: Ref) { @@ -75,6 +77,10 @@ export function usePopper ({ scroll, resize } + }, + { + name: 'arrow', + enabled: arrow } ] } diff --git a/src/runtime/types/popper.d.ts b/src/runtime/types/popper.d.ts index 138b0af257..260e6d3de3 100644 --- a/src/runtime/types/popper.d.ts +++ b/src/runtime/types/popper.d.ts @@ -11,4 +11,5 @@ export interface PopperOptions { adaptive?: boolean scroll?: boolean resize?: boolean + arrow?: boolean } diff --git a/src/runtime/ui.config.ts b/src/runtime/ui.config.ts index f633061b5f..0b9858d817 100644 --- a/src/runtime/ui.config.ts +++ b/src/runtime/ui.config.ts @@ -978,14 +978,14 @@ export const slideover = { export const tooltip = { wrapper: 'relative inline-flex', - container: 'z-20', + container: 'z-20 group', width: 'max-w-xs', background: 'bg-white dark:bg-gray-900', color: 'text-gray-900 dark:text-white', shadow: 'shadow', rounded: 'rounded', ring: 'ring-1 ring-gray-200 dark:ring-gray-800', - base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate', + base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative', shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5', // Syntax for `` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions transition: { @@ -998,6 +998,14 @@ export const tooltip = { }, popper: { strategy: 'fixed' + }, + arrow: { + base: 'before:w-2 before:h-2', + ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800', + rounded: 'before:rounded-sm', + background: 'before:bg-white dark:before:bg-gray-900', + shadow: 'before:shadow', + placement: 'group-data-[popper-placement=right]:-left-1 group-data-[popper-placement=left]:-right-1 group-data-[popper-placement=top]:-bottom-1 group-data-[popper-placement=bottom]:-top-1' } } From e33781afec64bd1141abdbfcd455d6c17fb81a5a Mon Sep 17 00:00:00 2001 From: Conner Blanton Date: Wed, 25 Oct 2023 22:20:52 -0500 Subject: [PATCH 2/4] docs(Tooltip): add examples using popper options --- .../content/examples/TooltipExampleArrow.vue | 5 +++++ .../content/examples/TooltipExampleOffset.vue | 5 +++++ .../content/examples/TooltipExamplePlacement.vue | 5 +++++ docs/content/6.overlays/4.tooltip.md | 14 ++++++++++++++ 4 files changed, 29 insertions(+) create mode 100644 docs/components/content/examples/TooltipExampleArrow.vue create mode 100644 docs/components/content/examples/TooltipExampleOffset.vue create mode 100644 docs/components/content/examples/TooltipExamplePlacement.vue diff --git a/docs/components/content/examples/TooltipExampleArrow.vue b/docs/components/content/examples/TooltipExampleArrow.vue new file mode 100644 index 0000000000..16b56205f1 --- /dev/null +++ b/docs/components/content/examples/TooltipExampleArrow.vue @@ -0,0 +1,5 @@ + diff --git a/docs/components/content/examples/TooltipExampleOffset.vue b/docs/components/content/examples/TooltipExampleOffset.vue new file mode 100644 index 0000000000..c48d1f8cac --- /dev/null +++ b/docs/components/content/examples/TooltipExampleOffset.vue @@ -0,0 +1,5 @@ + diff --git a/docs/components/content/examples/TooltipExamplePlacement.vue b/docs/components/content/examples/TooltipExamplePlacement.vue new file mode 100644 index 0000000000..2723c071c4 --- /dev/null +++ b/docs/components/content/examples/TooltipExamplePlacement.vue @@ -0,0 +1,5 @@ + diff --git a/docs/content/6.overlays/4.tooltip.md b/docs/content/6.overlays/4.tooltip.md index 74c4d291be..57bab38d70 100644 --- a/docs/content/6.overlays/4.tooltip.md +++ b/docs/content/6.overlays/4.tooltip.md @@ -26,6 +26,20 @@ slots: [Hello World!]{.italic} :: +## Popper Options + +Use the `popper` prop to customize the tootip + +### Arrow + +:component-example{component="tooltip-example-arrow"} + +### Placement +:component-example{component="tooltip-example-placement"} + +### Offset +:component-example{component="tooltip-example-offset"} + ## Props :component-props From 8d49bdfb5868e74b475dd324951ef9a7615d655d Mon Sep 17 00:00:00 2001 From: Conner Blanton Date: Thu, 26 Oct 2023 07:36:32 -0500 Subject: [PATCH 3/4] fixing arrow animation --- src/runtime/components/overlays/Tooltip.vue | 27 +++++++++++---------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/src/runtime/components/overlays/Tooltip.vue b/src/runtime/components/overlays/Tooltip.vue index b3507f459f..d915362e21 100644 --- a/src/runtime/components/overlays/Tooltip.vue +++ b/src/runtime/components/overlays/Tooltip.vue @@ -6,20 +6,21 @@
-
- - -
- - {{ text }} - +
+
- - · - - {{ shortcut }} - - +
+ + {{ text }} + + + + · + + {{ shortcut }} + + +
From ecd4b122b605a4c568b777233e980751fbc2de1d Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Thu, 26 Oct 2023 15:36:01 +0200 Subject: [PATCH 4/4] up --- docs/content/6.overlays/4.tooltip.md | 30 +++++++++++++++------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/docs/content/6.overlays/4.tooltip.md b/docs/content/6.overlays/4.tooltip.md index 57bab38d70..511627f783 100644 --- a/docs/content/6.overlays/4.tooltip.md +++ b/docs/content/6.overlays/4.tooltip.md @@ -10,6 +10,22 @@ links: :component-example{component="tooltip-example"} +## Popper + +Use the `popper` prop to customize the tootip. + +### Arrow + +:component-example{component="tooltip-example-arrow"} + +### Placement + +:component-example{component="tooltip-example-placement"} + +### Offset + +:component-example{component="tooltip-example-offset"} + ## Slots ### `text` @@ -26,20 +42,6 @@ slots: [Hello World!]{.italic} :: -## Popper Options - -Use the `popper` prop to customize the tootip - -### Arrow - -:component-example{component="tooltip-example-arrow"} - -### Placement -:component-example{component="tooltip-example-placement"} - -### Offset -:component-example{component="tooltip-example-offset"} - ## Props :component-props