chore(Tooltip): handle shortcuts

docs/pages/examples.vue

@@ -154,8 +154,8 @@
         Tooltip:
       </div>
 
-      <UTooltip text="Hello tooltip!">
-        <UIcon name="heroicons-outline:information-circle" class="w-6 h-6 text-black cursor-pointer" />
+      <UTooltip text="Hello tooltip!" :shortcuts="['⌘', 'G']">
+        <UIcon name="heroicons-outline:information-circle" class="w-6 h-6 u-text-gray-900 cursor-pointer" />
       </UTooltip>
     </div>
 

src/runtime/components/overlays/Tooltip.vue

@@ -6,10 +6,17 @@
 
     <div v-if="open" ref="container" :class="[containerClass, widthClass]">
       <transition appear v-bind="transitionClass">
-        <div :class="baseClass">
+        <div :class="[baseClass, backgroundClass, roundedClass, shadowClass, ringClass]">
           <slot name="text">
-            {{ text }}
+            <span class="truncate">{{ text }}</span>
           </slot>
+
+          <span v-if="shortcuts?.length" class="inline-flex items-center justify-end flex-shrink-0 gap-0.5 ml-1">
+            <span class="mr-1 u-text-gray-700">&middot;</span>
+            <kbd v-for="shortcut of shortcuts" :key="shortcut" class="flex items-center justify-center font-sans px-1 h-4 w-4 text-[10px] u-bg-gray-100 rounded u-text-gray-900">
+              {{ shortcut }}
+            </kbd>
+          </span>
         </div>
       </transition>
     </div>
@@ -29,6 +36,10 @@ const props = defineProps({
     type: String,
     default: null
   },
+  shortcuts: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
   wrapperClass: {
     type: String,
     default: () => $ui.tooltip.wrapper
@@ -41,6 +52,22 @@ const props = defineProps({
     type: String,
     default: () => $ui.tooltip.width
   },
+  backgroundClass: {
+    type: String,
+    default: () => $ui.tooltip.background
+  },
+  shadowClass: {
+    type: String,
+    default: () => $ui.tooltip.shadow
+  },
+  ringClass: {
+    type: String,
+    default: () => $ui.tooltip.ring
+  },
+  roundedClass: {
+    type: String,
+    default: () => $ui.tooltip.rounded
+  },
   baseClass: {
     type: String,
     default: () => $ui.tooltip.base

src/runtime/presets/default.ts

@@ -487,7 +487,11 @@ export default (variantColors: string[]) => {
     wrapper: 'relative inline-flex',
     container: 'z-20',
     width: 'max-w-xs',
-    base: 'invisible w-auto h-6 px-2 py-1 space-x-1 truncate rounded shadow lg:visible u-bg-gray-800 truncate u-text-gray-50 text-xs',
+    background: 'u-bg-white',
+    shadow: 'shadow',
+    rounded: 'rounded',
+    ring: 'ring-1 u-ring-gray-200',
+    base: 'invisible lg:visible h-6 px-2 py-1 text-xs',
     transition: {
       enterActiveClass: 'transition ease-out duration-200',
       enterFromClass: 'opacity-0 translate-y-1',