replace popper to floating-vue
This commit is contained in:
hirakei1203
@@ -1,32 +1,17 @@
|
||||
<template>
|
||||
<Tooltip :placement="placement" hover arrow>
|
||||
|
||||
<Tooltip>
|
||||
<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">
|
||||
<slot name="trigger-text"></slot>
|
||||
Default Tooltip
|
||||
</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">
|
||||
<slot name="content-text"></slot>
|
||||
</div>
|
||||
Tooltip content
|
||||
</template>
|
||||
|
||||
</Tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Tooltip } from '../../../../src/index'
|
||||
import type { PropType } from 'vue'
|
||||
import type { TooltipPlacement } from '../../../../src/components/Tooltip/types'
|
||||
|
||||
const props = defineProps({
|
||||
placement: {
|
||||
type: String as PropType<TooltipPlacement>,
|
||||
default: 'top'
|
||||
}
|
||||
})
|
||||
<script setup>
|
||||
import { Tooltip } from '../../../../src/index'
|
||||
</script>
|
||||
56
docs/components/tooltip/examples/TooltipPositionExample.vue
Normal file
56
docs/components/tooltip/examples/TooltipPositionExample.vue
Normal 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>
|
||||
@@ -1,34 +1,32 @@
|
||||
<template>
|
||||
<Tooltip :placement="placement" :class="colorStyle" hover arrow>
|
||||
|
||||
<div class="flex flex-wrap justify-center py-8 space-x-3">
|
||||
<!-- light style tooltip -->
|
||||
<Tooltip tooltip-style="tooltip-light">
|
||||
<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">
|
||||
<slot name="trigger-text"></slot>
|
||||
Light Tooltip
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<slot name="tooltip"></slot>
|
||||
Tooltip content
|
||||
</template>
|
||||
|
||||
</Tooltip>
|
||||
<!-- dark style 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>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Tooltip } from '../../../../src/index'
|
||||
import type { PropType } from 'vue'
|
||||
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 setup>
|
||||
import { Tooltip } from '../../../../src/index'
|
||||
</script>
|
||||
@@ -1,21 +1,30 @@
|
||||
<template>
|
||||
<Tooltip :placement="placement" click arrow>
|
||||
|
||||
<div class="flex flex-wrap justify-center py-8 space-x-3">
|
||||
<!-- Show tooltip on hover -->
|
||||
<Tooltip trigger="hover">
|
||||
<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">
|
||||
<slot name="trigger-text"></slot>
|
||||
Tooltip hover
|
||||
</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">
|
||||
<slot name="content-text"></slot>
|
||||
</div>
|
||||
Tooltip content
|
||||
</template>
|
||||
|
||||
</Tooltip>
|
||||
<!-- Show tooltip on click -->
|
||||
<Tooltip trigger="click">
|
||||
<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
|
||||
</button>
|
||||
</template>
|
||||
<template #content>
|
||||
Tooltip content
|
||||
</template>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
import TooltipExample from './examples/TooltipExample.vue'
|
||||
import TooltipPositionExample from './examples/TooltipPositionExample.vue'
|
||||
import TooltipStyleExample from './examples/TooltipStyleExample.vue'
|
||||
import TooltipTriggerExample from './examples/TooltipTriggerExample.vue'
|
||||
</script>
|
||||
@@ -7,10 +8,7 @@ import TooltipTriggerExample from './examples/TooltipTriggerExample.vue'
|
||||
|
||||
## Demo
|
||||
|
||||
<TooltipExample>
|
||||
<template #trigger-text>Demo Tooltip</template>
|
||||
<template #content-text>Demo Content</template>
|
||||
</TooltipExample>
|
||||
<TooltipExample></TooltipExample>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
@@ -18,118 +16,15 @@ import { Tooltip } from 'flowbite-vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tooltip hover arrow>
|
||||
<Tooltip>
|
||||
<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">
|
||||
Demo tooltip
|
||||
Default Tooltip
|
||||
</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">
|
||||
Demo content
|
||||
</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>
|
||||
Tooltip content
|
||||
</template>
|
||||
</Tooltip>
|
||||
</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.
|
||||
|
||||
<div class="flex flex-wrap justify-center py-8 space-x-3">
|
||||
<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>
|
||||
<TooltipStyleExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
@@ -171,83 +42,124 @@ import { Tooltip } from 'flowbite-vue'
|
||||
</script>
|
||||
|
||||
<!-- light style tooltip -->
|
||||
<Tooltip class="tooltip-light" hover arrow>
|
||||
<Tooltip tooltip-style="tooltip-light">
|
||||
<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">
|
||||
light style tooltip
|
||||
Light Tooltip
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div
|
||||
class="py-2 px-3 text-sm font-medium rounded-lg shadow-sm transition-opacity duration-300">
|
||||
light style content
|
||||
</div>
|
||||
Tooltip content
|
||||
</template>
|
||||
</Tooltip>
|
||||
|
||||
<!-- dark style tooltip -->
|
||||
<Tooltip class="tooltip-dark" hover arrow>
|
||||
<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 style tooltip
|
||||
Dark Tooltip
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div
|
||||
class="py-2 px-3 text-sm font-medium text-white rounded-lg shadow-sm transition-opacity duration-300">
|
||||
dark style content
|
||||
</div>
|
||||
Tooltip content
|
||||
</template>
|
||||
</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
|
||||
|
||||
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">
|
||||
<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>
|
||||
|
||||
<TooltipTriggerExample />
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { Tooltip } from 'flowbite-vue'
|
||||
</script>
|
||||
|
||||
<!-- light style tooltip -->
|
||||
<template>
|
||||
<Tooltip hover arrow>
|
||||
<!-- Show tooltip on hover -->
|
||||
<Tooltip trigger="hover">
|
||||
<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 Hover
|
||||
Tooltip hover
|
||||
</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 Content
|
||||
</div>
|
||||
Tooltip content
|
||||
</template>
|
||||
</Tooltip>
|
||||
</template>
|
||||
|
||||
<!-- light style tooltip -->
|
||||
<template>
|
||||
<Tooltip click arrow>
|
||||
</Tooltip>
|
||||
<!-- Show tooltip on click -->
|
||||
<Tooltip trigger="click">
|
||||
<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">
|
||||
@@ -255,11 +167,7 @@ import { Tooltip } from 'flowbite-vue'
|
||||
</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 Content
|
||||
</div>
|
||||
Tooltip content
|
||||
</template>
|
||||
</Tooltip>
|
||||
</template>
|
||||
</Tooltip>
|
||||
```
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^8.9.1",
|
||||
"vitepress": "^1.0.0-alpha.4",
|
||||
"vue3-popper": "^1.5.0"
|
||||
"floating-vue": "^2.0.0-beta.20",
|
||||
"vitepress": "^1.0.0-alpha.4"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,50 +1,78 @@
|
||||
<template>
|
||||
<div>
|
||||
<Popper :class="colorStyle" v-bind="$attrs" :placement="placement">
|
||||
<div class="flex items-start">
|
||||
<TooltipComponent :placement="placement" :triggers="[trigger]" :theme="tooltipStyle">
|
||||
<slot name="trigger"></slot>
|
||||
|
||||
<template #content>
|
||||
<template #popper>
|
||||
<slot name="content"></slot>
|
||||
</template>
|
||||
</Popper>
|
||||
</TooltipComponent>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { PropType } from 'vue'
|
||||
import type { TooltipPlacement, TooltipStyle } from './types'
|
||||
import Popper from "vue3-popper";
|
||||
import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
|
||||
import { Tooltip as TooltipComponent } from 'floating-vue'
|
||||
import 'floating-vue/dist/style.css'
|
||||
|
||||
const props = defineProps({
|
||||
placement: {
|
||||
type: String as PropType<TooltipPlacement>,
|
||||
default: "top"
|
||||
},
|
||||
colorStyle: {
|
||||
tooltipStyle: {
|
||||
type: String as PropType<TooltipStyle>,
|
||||
default: "tooltip-dark",
|
||||
},
|
||||
trigger: {
|
||||
type: String as PropType<TooltipTrigger>,
|
||||
default: "hover"
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tooltip-dark {
|
||||
--popper-theme-background-color: #0f172a;
|
||||
--popper-theme-background-color-hover: #0f172a;
|
||||
--popper-theme-text-color: white;
|
||||
--popper-theme-border-width: 0px;
|
||||
--popper-theme-border-radius: 6px;
|
||||
--popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
|
||||
<style>
|
||||
.v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner {
|
||||
background: rgba(0,0,0);
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 7px 12px 6px;
|
||||
}
|
||||
|
||||
.tooltip-light {
|
||||
--popper-theme-background-color: #ffffff;
|
||||
--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-inner {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -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 TooltipStyle = "tooltip-dark" | "tooltip-light";
|
||||
export type TooltipTrigger = "hover" | "click" ;
|
||||
Reference in New Issue
Block a user