feat(Tooltip): add max width, fix padding and change placement

gitsindonesia · Jun 9, 2023 · 6bd4bc2 · 6bd4bc2
1 parent 935ea59
commit 6bd4bc2
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 4 deletions.
diff --git a/packages/themes/src/morpheme/_tooltip.scss b/packages/themes/src/morpheme/_tooltip.scss
@@ -1,8 +1,9 @@
 :root {
-  --v-tooltip-padding-x: var(--size-spacing-2);
-  --v-tooltip-padding-y: var(--size-spacing-3);
+  --v-tooltip-padding-x: var(--size-spacing-3);
+  --v-tooltip-padding-y: var(--size-spacing-2);
   --v-tooltip-border-radius: var(--border-radius-lg);
   --v-tooltip-font-size: var(--size-font-sm);
+  --v-tooltip-max-width: 320px;
 
   // black theme
   --v-tooltip-black-bg-color: var(--color-gray-900);
@@ -27,6 +28,7 @@
     padding: var(--v-tooltip-padding-y) var(--v-tooltip-padding-x);
     border-radius: var(--v-tooltip-border-radius);
     font-size: var(--v-tooltip-font-size);
+    max-width: var(--v-tooltip-max-width);
   }
 
   .v-popper__arrow-outer {
@@ -42,6 +44,7 @@
     border-radius: var(--v-tooltip-border-radius);
     font-size: var(--v-tooltip-font-size);
     border: var(--v-tooltip-white-border);
+    max-width: var(--v-tooltip-max-width);
   }
 
   .v-popper__arrow-outer {

diff --git a/packages/tooltip/src/VTooltip.stories.ts b/packages/tooltip/src/VTooltip.stories.ts
@@ -87,6 +87,35 @@ export const Colors: Story = (args) => ({
   `,
 });
 
+export const LongText: Story = (args) => ({
+  components: {VTooltip, VBtn},
+  setup() {
+    return {args};
+  },
+  template: `
+    <VTooltip v-bind='args'>
+      <template #activator>
+        <v-btn>
+          Default (black)
+        </v-btn>
+      </template>
+      <span>
+        lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
+      </span>
+    </VTooltip>
+    <VTooltip v-bind='args' color="white">
+      <template #activator>
+        <v-btn>
+          White
+        </v-btn>
+      </template>
+      <span>
+      lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
+      </span>
+    </VTooltip>
+  `,
+});
+
 export const DarkMode: Story = (args) => ({
   components: {VTooltip, VBtn},
   setup() {

diff --git a/packages/tooltip/src/VTooltip.vue b/packages/tooltip/src/VTooltip.vue
@@ -2,10 +2,27 @@
 import FloatingVue, {Tooltip} from 'floating-vue';
 import {PropType} from 'vue';
 
+export type VTooltipPlacement =
+  | 'auto'
+  | 'auto-start'
+  | 'auto-end'
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end';
+
 defineProps({
   placement: {
-    type: String,
-    default: 'top',
+    type: String as PropType<VTooltipPlacement>,
+    default: 'bottom',
   },
   /**
    * @deprecated no longer used
@@ -37,10 +54,12 @@ defineProps({
 FloatingVue.options.themes['tooltip-black'] = {
   $extend: 'tooltip',
   $resetCss: true,
+  disposeTimeout: 100000,
 };
 FloatingVue.options.themes['tooltip-white'] = {
   $extend: 'tooltip',
   $resetCss: true,
+  disposeTimeout: 100000,
 };
 </script>