feat(Tooltip): adding option to show popper arrow (#868)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/components/content/examples/TooltipExampleArrow.vue

@@ -0,0 +1,5 @@
+<template>
+  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ arrow: true }">
+    <UButton color="gray" label="Hover me" />
+  </UTooltip>
+</template>

docs/components/content/examples/TooltipExampleOffset.vue

@@ -0,0 +1,5 @@
+<template>
+  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ offsetDistance: 16 }">
+    <UButton color="gray" label="Hover me" />
+  </UTooltip>
+</template>

docs/components/content/examples/TooltipExamplePlacement.vue

@@ -0,0 +1,5 @@
+<template>
+  <UTooltip text="Tooltip example" :shortcuts="['⌘', 'O']" :popper="{ placement: 'right' }">
+    <UButton color="gray" label="Hover me" />
+  </UTooltip>
+</template>

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`

src/runtime/components/overlays/Tooltip.vue

@@ -6,17 +6,21 @@
 
     <div v-if="open && !prevent" ref="container" :class="[ui.container, ui.width]">
       <Transition appear v-bind="ui.transition">
-        <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
-          <slot name="text">
-            {{ text }}
-          </slot>
+        <div>
+          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
 
-          <span v-if="shortcuts?.length" :class="ui.shortcuts">
-            <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
-            <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
-              {{ shortcut }}
-            </Ukbd>
-          </span>
+          <div :class="[ui.base, ui.background, ui.color, ui.rounded, ui.shadow, ui.ring]">
+            <slot name="text">
+              {{ text }}
+            </slot>
+
+            <span v-if="shortcuts?.length" :class="ui.shortcuts">
+              <span class="mx-1 text-gray-700 dark:text-gray-200">&middot;</span>
+              <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
+                {{ shortcut }}
+              </Ukbd>
+            </span>
+          </div>
         </div>
       </Transition>
     </div>
@@ -127,6 +131,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,

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<Element | VirtualElement>) {
@@ -75,6 +77,10 @@ export function usePopper ({
               scroll,
               resize
             }
+          },
+          {
+            name: 'arrow',
+            enabled: arrow
           }
         ]
       }

src/runtime/types/popper.d.ts

@@ -11,4 +11,5 @@ export interface PopperOptions {
   adaptive?: boolean
   scroll?: boolean
   resize?: boolean
+  arrow?: boolean
 }

src/runtime/ui.config.ts

@@ -988,14 +988,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 `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
@@ -1008,6 +1008,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'
   }
 }