jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

replace popper to floating-vue

Browse Source
This commit is contained in:
hirakei1203
2022-11-24 23:57:27 +09:00
parent 66aa000808
commit 9ed0804cea
8 changed files with 290 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/components/tooltip/examples/TooltipExample.vue
View File

@@ -1,32 +1,17 @@
<template> <template>
<Tooltip :placement="placement" hover arrow> <Tooltip>
<template #trigger> <template #trigger>
<button type="button" <button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<slot name="trigger-text"></slot> Default Tooltip
</button> </button>
</template> </template>
<template #content> <template #content>
<div Tooltip content
class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
<slot name="content-text"></slot>
</div>
</template> </template>
</Tooltip> </Tooltip>
</template> </template>
<script lang="ts" setup> <script setup>
import { Tooltip } from '../../../../src/index' import { Tooltip } from '../../../../src/index'
import type { PropType } from 'vue' </script>
import type { TooltipPlacement } from '../../../../src/components/Tooltip/types'
const props = defineProps({
placement: {
type: String as PropType<TooltipPlacement>,
default: 'top'
}
})
</script>

56
docs/components/tooltip/examples/TooltipPositionExample.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<div class="flex flex-wrap justify-center py-8 space-x-3">
<!-- Show tooltip on top -->
<Tooltip placement="top">
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip top
</button>
</template>
<template #content>
Tooltip on top
</template>
</Tooltip>
<!-- Show tooltip on right -->
<Tooltip placement="right">
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip right
</button>
</template>
<template #content>
Tooltip on right
</template>
</Tooltip>
<!-- Show tooltip on bottom -->
<Tooltip placement="bottom">
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip bottom
</button>
</template>
<template #content>
Tooltip on bottom
</template>
</Tooltip>
<!-- Show tooltip on left -->
<Tooltip placement="left">
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip left
</button>
</template>
<template #content>
Tooltip on left
</template>
</Tooltip>
</div>
</template>
<script setup>
import { Tooltip } from '../../../../src/index'
</script>

56
docs/components/tooltip/examples/TooltipStyleExample.vue
View File

@@ -1,34 +1,32 @@
<template> <template>
<Tooltip :placement="placement" :class="colorStyle" hover arrow> <div class="flex flex-wrap justify-center py-8 space-x-3">
<!-- light style tooltip -->
<template #trigger> <Tooltip tooltip-style="tooltip-light">
<button type="button" <template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<slot name="trigger-text"></slot> Light Tooltip
</button> </button>
</template> </template>
<template #content>
<template #content> Tooltip content
<slot name="tooltip"></slot> </template>
</template> </Tooltip>
<!-- dark style tooltip -->
</Tooltip> <Tooltip tooltip-style="tooltip-dark">
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Dark Tooltip
</button>
</template>
<template #content>
Tooltip content
</template>
</Tooltip>
</div>
</template> </template>
<script lang="ts" setup> <script setup>
import { Tooltip } from '../../../../src/index' import { Tooltip } from '../../../../src/index'
import type { PropType } from 'vue' </script>
import type { TooltipPlacement, TooltipStyle } from '../../../../src/components/Tooltip/types'
const props = defineProps({
placement: {
type: String as PropType<TooltipPlacement>,
default: 'top'
},
colorStyle: {
type: String as PropType<TooltipStyle>,
default: "tooltip-dark",
}
})
</script>

43
docs/components/tooltip/examples/TooltipTriggerExample.vue
View File

@@ -1,21 +1,30 @@
<template> <template>
<Tooltip :placement="placement" click arrow> <div class="flex flex-wrap justify-center py-8 space-x-3">
<!-- Show tooltip on hover -->
<template #trigger> <Tooltip trigger="hover">
<button type="button" <template #trigger>
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <button type="button"
<slot name="trigger-text"></slot> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
</button> Tooltip hover
</template> </button>
</template>
<template #content> <template #content>
<div Tooltip content
class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700"> </template>
<slot name="content-text"></slot> </Tooltip>
</div> <!-- Show tooltip on click -->
</template> <Tooltip trigger="click">
<template #trigger>
</Tooltip> <button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip click
</button>
</template>
<template #content>
Tooltip content
</template>
</Tooltip>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

320
docs/components/tooltip/tooltip.md
View File

@@ -1,5 +1,6 @@
<script setup> <script setup>
import TooltipExample from './examples/TooltipExample.vue' import TooltipExample from './examples/TooltipExample.vue'
import TooltipPositionExample from './examples/TooltipPositionExample.vue'
import TooltipStyleExample from './examples/TooltipStyleExample.vue' import TooltipStyleExample from './examples/TooltipStyleExample.vue'
import TooltipTriggerExample from './examples/TooltipTriggerExample.vue' import TooltipTriggerExample from './examples/TooltipTriggerExample.vue'
</script> </script>
@@ -7,10 +8,7 @@ import TooltipTriggerExample from './examples/TooltipTriggerExample.vue'
## Demo ## Demo
<TooltipExample> <TooltipExample></TooltipExample>
<template #trigger-text>Demo Tooltip</template>
<template #content-text>Demo Content</template>
</TooltipExample>
```vue ```vue
<script setup> <script setup>
@@ -18,120 +16,17 @@ import { Tooltip } from 'flowbite-vue'
</script> </script>
<template> <template>
<Tooltip hover arrow> <Tooltip>
<template #trigger> <template #trigger>
<button type="button" <button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Demo tooltip Default Tooltip
</button> </button>
</template> </template>
<template #content> <template #content>
<div Tooltip content
class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700"> </template>
Demo content </Tooltip>
</div>
</template>
</Tooltip>
</template>
```
## Placement
The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using placement attribute with `top`, `top-start` , `top-end`, `bottom`, `bottom-start`, `bottom-end`, `right`, `right-start`, `right-end`, `left`, `left-start`, `left-end`, `auto`, `auto-start`, `auto-end`.
The default value is: `top`
<div class="flex flex-wrap justify-center py-8 space-x-3">
<TooltipExample placement="top">
<template #trigger-text>Tooltip top</template>
<template #content-text>Tooltip top</template>
</TooltipExample>
<TooltipExample placement="right">
<template #trigger-text>Tooltip right</template>
<template #content-text>Tooltip on right</template>
</TooltipExample>
<TooltipExample placement="bottom">
<template #trigger-text>Tooltip bottom</template>
<template #content-text>Tooltip on bottom</template>
</TooltipExample>
<TooltipExample placement="left">
<template #trigger-text>Tooltip left</template>
<template #content-text>Tooltip on left</template>
</TooltipExample>
</div>
```vue
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>
<template>
<!-- Show tooltip on top -->
<Tooltip placement="top" hover arrow>
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip top
</button>
</template>
<template #content>
<div
class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
Tooltip on top
</div>
</template>
</Tooltip>
<!-- Show tooltip on right -->
<Tooltip placement="right" hover arrow>
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip right
</button>
</template>
<template #content>
<div
class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
Tooltip on right
</div>
</template>
</Tooltip>
<!-- Show tooltip on bottom -->
<Tooltip placement="bottom" hover arrow>
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip bottom
</button>
</template>
<template #content>
<div
class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
Tooltip on bottom
</div>
</template>
</Tooltip>
<!-- Show tooltip on left -->
<Tooltip placement="left" hover arrow>
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip left
</button>
</template>
<template #content>
<div
class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
Tooltip left
</div>
</template>
</Tooltip>
</template> </template>
``` ```
@@ -139,31 +34,7 @@ import { Tooltip } from 'flowbite-vue'
You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `tooltip-light` or `tooltip-dark` attribute. You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `tooltip-light` or `tooltip-dark` attribute.
<div class="flex flex-wrap justify-center py-8 space-x-3"> <TooltipStyleExample />
<TooltipStyleExample placement="top" arrow-color="yellow" colorStyle="tooltip-light">
<template #trigger-text>
light style tooltip
</template>
<template #tooltip>
<div
class="py-2 px-3 text-sm font-medium rounded-lg shadow-sm transition-opacity duration-300">
light style content
</div>
</template>
</TooltipStyleExample>
<TooltipStyleExample placement="top" arrow-color="yellow" colorStyle="tooltip-dark">
<template #trigger-text>
dark style tooltip
</template>
<template #tooltip>
<div
class="py-2 px-3 text-sm font-medium text-white rounded-lg shadow-sm transition-opacity duration-300">
dark style Tooltip
</div>
</template>
</TooltipStyleExample>
</div>
```vue ```vue
<script setup> <script setup>
@@ -171,95 +42,132 @@ import { Tooltip } from 'flowbite-vue'
</script> </script>
<!-- light style tooltip --> <!-- light style tooltip -->
<Tooltip class="tooltip-light" hover arrow> <Tooltip tooltip-style="tooltip-light">
<template #trigger> <template #trigger>
<button type="button" <button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
light style tooltip Light Tooltip
</button> </button>
</template> </template>
<template #content> <template #content>
<div Tooltip content
class="py-2 px-3 text-sm font-medium rounded-lg shadow-sm transition-opacity duration-300">
light style content
</div>
</template> </template>
</Tooltip> </Tooltip>
<!-- dark style tooltip --> <!-- dark style tooltip -->
<Tooltip class="tooltip-dark" hover arrow> <Tooltip tooltip-style="tooltip-dark">
<template #trigger> <template #trigger>
<button type="button" <button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
dark style tooltip Dark Tooltip
</button> </button>
</template> </template>
<template #content> <template #content>
<div Tooltip content
class="py-2 px-3 text-sm font-medium text-white rounded-lg shadow-sm transition-opacity duration-300">
dark style content
</div>
</template> </template>
</Tooltip> </Tooltip>
``` ```
## Placement
The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using placement attribute with `top`, `top-start` , `top-end`, `bottom`, `bottom-start`, `bottom-end`, `right`, `right-start`, `right-end`, `left`, `left-start`, `left-end`, `auto`, `auto-start`, `auto-end`.
The default value is: `top`
<TooltipPositionExample />
```vue
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>
<template>
<!-- Show tooltip on top -->
<Tooltip placement="top">
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip top
</button>
</template>
<template #content>
Tooltip on top
</template>
</Tooltip>
<!-- Show tooltip on right -->
<Tooltip placement="right">
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip right
</button>
</template>
<template #content>
Tooltip on right
</template>
</Tooltip>
<!-- Show tooltip on bottom -->
<Tooltip placement="bottom">
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip bottom
</button>
</template>
<template #content>
Tooltip on bottom
</template>
</Tooltip>
<!-- Show tooltip on left -->
<Tooltip placement="left">
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip left
</button>
</template>
<template #content>
Tooltip on left
</template>
</Tooltip>
```
## triggerType ## triggerType
You can choose the triggering event by using the `hover` or `click` attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to `click`. You can choose the triggering event by using the `hover` or `click` attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to `click`.
<div class="flex flex-wrap justify-center py-8 space-x-3"> <TooltipTriggerExample />
<TooltipExample>
<template #trigger-text>Tooltip Hover</template>
<template #content-text>Tooltip Content</template>
</TooltipExample>
<TooltipTriggerExample>
<template #trigger-text>Tooltip click</template>
<template #content-text>Tooltip Content</template>
</TooltipTriggerExample>
</div>
```vue ```vue
<script setup> <script setup>
import { Tooltip } from 'flowbite-vue' import { Tooltip } from 'flowbite-vue'
</script> </script>
<!-- light style tooltip --> <!-- Show tooltip on hover -->
<template> <Tooltip trigger="hover">
<Tooltip hover arrow> <template #trigger>
<template #trigger> <button type="button"
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> Tooltip hover
Tooltip Hover </button>
</button> </template>
</template> <template #content>
<template #content> Tooltip content
<div </template>
class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700"> </Tooltip>
Tooltip Content <!-- Show tooltip on click -->
</div> <Tooltip trigger="click">
</template> <template #trigger>
</Tooltip> <button type="button"
</template> class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<!-- light style tooltip -->
<template>
<Tooltip click arrow>
<template #trigger>
<button type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Tooltip click Tooltip click
</button> </button>
</template> </template>
<template #content> <template #content>
<div Tooltip content
class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700"> </template>
Tooltip Content </Tooltip>
</div>
</template>
</Tooltip>
</template>
``` ```

4
package.json
View File

@@ -65,7 +65,7 @@
}, },
"dependencies": { "dependencies": {
"@vueuse/core": "^8.9.1", "@vueuse/core": "^8.9.1",
"vitepress": "^1.0.0-alpha.4", "floating-vue": "^2.0.0-beta.20",
"vue3-popper": "^1.5.0" "vitepress": "^1.0.0-alpha.4"
} }
} }

86
src/components/Tooltip/Tooltip.vue
View File

@@ -1,50 +1,78 @@
<template> <template>
<div> <div class="flex items-start">
<Popper :class="colorStyle" v-bind="$attrs" :placement="placement"> <TooltipComponent :placement="placement" :triggers="[trigger]" :theme="tooltipStyle">
<slot name="trigger"></slot> <slot name="trigger"></slot>
<template #popper>
<template #content> <slot name="content"></slot>
<slot name="content"></slot> </template>
</template> </TooltipComponent>
</Popper>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from 'vue' import type { PropType } from 'vue'
import type { TooltipPlacement, TooltipStyle } from './types' import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
import Popper from "vue3-popper"; import { Tooltip as TooltipComponent } from 'floating-vue'
import 'floating-vue/dist/style.css'
const props = defineProps({ const props = defineProps({
placement: { placement: {
type: String as PropType<TooltipPlacement>, type: String as PropType<TooltipPlacement>,
default: "top" default: "top"
}, },
colorStyle: { tooltipStyle: {
type: String as PropType<TooltipStyle>, type: String as PropType<TooltipStyle>,
default: "tooltip-dark", default: "tooltip-dark",
},
trigger: {
type: String as PropType<TooltipTrigger>,
default: "hover"
} }
}) })
</script> </script>
<style scoped> <style>
.tooltip-dark { .v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner {
--popper-theme-background-color: #0f172a; background: rgba(0,0,0);
--popper-theme-background-color-hover: #0f172a; color: #fff;
--popper-theme-text-color: white; border-radius: 6px;
--popper-theme-border-width: 0px; padding: 7px 12px 6px;
--popper-theme-border-radius: 6px;
--popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
} }
.tooltip-light { .v-popper--theme-tooltip-dark .v-popper__arrow-inner {
--popper-theme-background-color: #ffffff; visibility: hidden;
--popper-theme-background-color-hover: #ffffff;
--popper-theme-text-color: #333333;
--popper-theme-border-width: 1px;
--popper-theme-border-style: solid;
--popper-theme-border-color: #eeeeee;
--popper-theme-border-radius: 6px;
--popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
} }
.v-popper--theme-tooltip-dark .v-popper__arrow-outer {
border-color: #000c;
}
@media (prefers-color-scheme: dark) {
.v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner {
background: rgb(55 65 81);
}
.v-popper--theme-tooltip-dark .v-popper__arrow-outer {
border-color: rgb(55 65 81);
}
}
.v-popper--theme-tooltip-light .v-popper__wrapper .v-popper__inner {
background: #fff;
color: black;
padding: 7px 12px 6px;
border-radius: 6px;
border: 1px solid #eeeeee;
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
}
.v-popper--theme-tooltip-light .v-popper__arrow-inner {
visibility: visible;
border-color: #fff;
}
.v-popper--theme-tooltip-light .v-popper__arrow-outer {
border-color: #ddd;
}
</style> </style>

3
src/components/Tooltip/types.ts
View File

@@ -1,2 +1,3 @@
export type TooltipPlacement = "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end" | undefined; export type TooltipPlacement = "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end" | undefined;
export type TooltipStyle = "tooltip-dark" | "tooltip-light"; export type TooltipStyle = "tooltip-dark" | "tooltip-light";
export type TooltipTrigger = "hover" | "click" ;