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

refactor: Small refactoring Tooltip component

Browse Source
This commit is contained in:
Ilya Artamonov
2022-12-05 21:18:53 +03:00
parent 20236c3f07
commit b2eca2d762
8 changed files with 193 additions and 1543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,10 @@
<template>
<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">
<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"
>
Default Tooltip
</button>
</template>
@@ -14,4 +16,4 @@
<script setup>
import { Tooltip } from '../../../../src/index'
</script>
</script>

34
docs/components/tooltip/examples/TooltipPositionExample.vue
View File

@@ -3,9 +3,11 @@
<!-- 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
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>
@@ -15,9 +17,11 @@
<!-- 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
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>
@@ -27,9 +31,11 @@
<!-- 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
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>
@@ -39,9 +45,11 @@
<!-- 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
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>
@@ -53,4 +61,4 @@
<script setup>
import { Tooltip } from '../../../../src/index'
</script>
</script>

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

@@ -1,11 +1,13 @@
<template>
<div class="flex flex-wrap justify-center py-8 space-x-3">
<!-- light style tooltip -->
<Tooltip tooltip-style="tooltip-light">
<Tooltip theme="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 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"
>
Light Tooltip
</button>
</template>
<template #content>
@@ -13,11 +15,13 @@
</template>
</Tooltip>
<!-- dark style tooltip -->
<Tooltip tooltip-style="tooltip-dark">
<Tooltip theme="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
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>
@@ -29,4 +33,4 @@
<script setup>
import { Tooltip } from '../../../../src/index'
</script>
</script>

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

@@ -3,9 +3,11 @@
<!-- 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
<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
</button>
</template>
<template #content>
@@ -15,9 +17,11 @@
<!-- 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
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>
@@ -35,11 +39,11 @@ import type { TooltipPlacement } from '../../../../src/components/Tooltip/types'
const props = defineProps({
placement: {
type: String as PropType<TooltipPlacement>,
default: 'top'
default: 'top',
},
arrowColor: {
type: String,
default: "#0f172a",
}
default: '#0f172a',
},
})
</script>

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

@@ -18,8 +18,10 @@ import { Tooltip } from 'flowbite-vue'
<template>
<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">
<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"
>
Default Tooltip
</button>
</template>
@@ -41,35 +43,43 @@ You can use choose between dark and light version styles for the tooltip compone
import { Tooltip } from 'flowbite-vue'
</script>
<!-- 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">
Light Tooltip
</button>
</template>
<template #content>
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">
<template>
<div class="flex flex-wrap justify-center py-8 space-x-3">
<!-- light style tooltip -->
<Tooltip theme="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 Tooltip
</button>
</template>
<template #content>
Tooltip content
</template>
</Tooltip>
<!-- dark style tooltip -->
<Tooltip theme="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>
</button>
</template>
<template #content>
Tooltip content
</template>
</Tooltip>
</div>
</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 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 />
@@ -80,57 +90,65 @@ 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">
<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">
</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">
</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>
</button>
</template>
<template #content>
Tooltip on left
</template>
</Tooltip>
</div>
</template>
```
@@ -146,28 +164,36 @@ You can choose the triggering event by using the `hover` or `click` attributes t
import { Tooltip } from 'flowbite-vue'
</script>
<!-- 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
</button>
</template>
<template #content>
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">
<template>
<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"
>
Tooltip hover
</button>
</template>
<template #content>
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>
</button>
</template>
<template #content>
Tooltip content
</template>
</Tooltip>
</div>
</template>
```

1404
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,6 +1,6 @@
<template>
<div class="flex items-start">
<TooltipComponent :placement="placement" :triggers="[trigger]" :theme="tooltipStyle">
<TooltipComponent :placement="placement" :triggers="[trigger]" :theme="theme" auto-hide>
<slot name="trigger"></slot>
<template #popper>
<slot name="content"></slot>
@@ -14,20 +14,28 @@ import type { PropType } from 'vue'
import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
import { Tooltip as TooltipComponent } from 'floating-vue'
import 'floating-vue/dist/style.css'
import { computed } from 'vue'
const props = defineProps({
placement: {
type: String as PropType<TooltipPlacement>,
default: "top"
default: 'top',
},
tooltipStyle: {
theme: {
type: String as PropType<TooltipStyle>,
default: "tooltip-dark",
default: 'dark',
},
trigger: {
type: String as PropType<TooltipTrigger>,
default: "hover"
}
default: 'hover',
},
})
const theme = computed(() => {
const themes = {
'light': 'tooltip-light',
'dark': 'tooltip-dark',
}
return themes[props.theme]
})
</script>

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

@@ -1,3 +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" ;
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';
export type TooltipStyle = 'dark' | 'light';
export type TooltipTrigger = 'hover' | 'click' ;