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>
```