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

Merge pull request #95 from hirakei1203/feature/khirano/tooltip

Browse Source 
Add basic tooltip component (Issue #71)
This commit is contained in:
Ilya Artamonov
2022-11-30 13:06:36 +03:00
committed by GitHub
parent d7fb36c616 86535656e0
commit 20236c3f07
11 changed files with 448 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.node-version
View File

@@ -1 +1 @@
14.x
16.6.2

2
docs/.vitepress/config.ts
View File

@@ -47,6 +47,7 @@ function getComponents() {
{ text: 'Tabs', link: '/components/tabs/tabs.md' },
{ text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
{ text: 'Toast', link: 'components/toast/toast.md' },
{ text: 'Tooltip', link: 'components/tooltip/tooltip.md' },
{ text: 'Modal', link: 'components/modal/modal.md' },
{ text: 'Navbar', link: 'components/navbar/navbar.md' },
@@ -58,7 +59,6 @@ function getComponents() {
{ text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
{ text: '- Table', link: 'components/table/table.md' },
{ text: '- Timeline', link: 'components/timeline/timeline.md' },
{ text: '- Tooltip', link: 'components/tooltip/tooltip.md' },
]
}

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

@@ -1,8 +1,17 @@
<template>
<div class="vp-raw flex flex-col">
<Tooltip></Tooltip>
</div>
<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">
Default Tooltip
</button>
</template>
<template #content>
Tooltip content
</template>
</Tooltip>
</template>
<script setup>
import { Tooltip } from '../../../../src/index'
import { Tooltip } from '../../../../src/index'
</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>

32
docs/components/tooltip/examples/TooltipStyleExample.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<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">
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">
Dark Tooltip
</button>
</template>
<template #content>
Tooltip content
</template>
</Tooltip>
</div>
</template>
<script setup>
import { Tooltip } from '../../../../src/index'
</script>

45
docs/components/tooltip/examples/TooltipTriggerExample.vue Normal file
View File

@@ -0,0 +1,45 @@
<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>
</div>
</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'
},
arrowColor: {
type: String,
default: "#0f172a",
}
})
</script>

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

@@ -1,15 +1,173 @@
<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>
# Vue Tooltip Component - Flowbite
## Demo
<TooltipExample></TooltipExample>
```vue
<script setup>
import { Tooltip } from 'flowbite-vue'
</script>
<template>
<Tooltip></Tooltip>
<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">
Default Tooltip
</button>
</template>
<template #content>
Tooltip content
</template>
</Tooltip>
</template>
```
<TooltipExample />
## Tooltip styles
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.
<TooltipStyleExample />
```vue
<script setup>
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">
Dark Tooltip
</button>
</template>
<template #content>
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`.
<TooltipTriggerExample />
```vue
<script setup>
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">
Tooltip click
</button>
</template>
<template #content>
Tooltip content
</template>
</Tooltip>
```

63
package-lock.json generated
View File

@@ -5,12 +5,12 @@
"requires": true,
"packages": {
"": {
"name": "flowbite-vue",
"version": "0.0.7",
"license": "MIT",
"dependencies": {
"@vueuse/core": "9.3.0",
"classnames": "2.3.2",
"floating-vue": "^2.0.0-beta.20",
"flowbite": "1.5.4",
"lodash-es": "4.17.21",
"tailwindcss": "3.2.4"
@@ -377,6 +377,19 @@
"url": "https://opencollective.com/eslint"
}
},
"node_modules/@floating-ui/core": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
"integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
},
"node_modules/@floating-ui/dom": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
"integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
"dependencies": {
"@floating-ui/core": "^0.3.0"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -2659,6 +2672,18 @@
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
"dev": true
},
"node_modules/floating-vue": {
"version": "2.0.0-beta.20",
"resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.20.tgz",
"integrity": "sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==",
"dependencies": {
"@floating-ui/dom": "^0.1.10",
"vue-resize": "^2.0.0-alpha.1"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/flowbite": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.4.tgz",
@@ -5973,6 +5998,14 @@
"node": ">=4.0"
}
},
"node_modules/vue-resize": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-tsc": {
"version": "0.30.0",
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.30.0.tgz",
@@ -6484,6 +6517,19 @@
"strip-json-comments": "^3.1.1"
}
},
"@floating-ui/core": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
"integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
},
"@floating-ui/dom": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
"integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
"requires": {
"@floating-ui/core": "^0.3.0"
}
},
"@humanwhocodes/config-array": {
"version": "0.11.7",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -8111,6 +8157,15 @@
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
"dev": true
},
"floating-vue": {
"version": "2.0.0-beta.20",
"resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.20.tgz",
"integrity": "sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==",
"requires": {
"@floating-ui/dom": "^0.1.10",
"vue-resize": "^2.0.0-alpha.1"
}
},
"flowbite": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.4.tgz",
@@ -10276,6 +10331,12 @@
}
}
},
"vue-resize": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
"requires": {}
},
"vue-tsc": {
"version": "0.30.0",
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.30.0.tgz",

1
package.json
View File

@@ -60,6 +60,7 @@
"vue-tsc": "0.30.0"
},
"dependencies": {
"floating-vue": "^2.0.0-beta.20",
"@vueuse/core": "9.3.0",
"classnames": "2.3.2",
"flowbite": "1.5.4",

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

@@ -1,15 +1,78 @@
<template>
<div>
<button data-tooltip-target="tooltip-default" 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>
<div id="tooltip-default" role="tooltip"
class="inline-block absolute z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 tooltip dark:bg-gray-700">
Tooltip content
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<div class="flex items-start">
<TooltipComponent :placement="placement" :triggers="[trigger]" :theme="tooltipStyle">
<slot name="trigger"></slot>
<template #popper>
<slot name="content"></slot>
</template>
</TooltipComponent>
</div>
</template>
<script lang="ts" setup>
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'
const props = defineProps({
placement: {
type: String as PropType<TooltipPlacement>,
default: "top"
},
tooltipStyle: {
type: String as PropType<TooltipStyle>,
default: "tooltip-dark",
},
trigger: {
type: String as PropType<TooltipTrigger>,
default: "hover"
}
})
</script>
<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;
}
.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>

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

@@ -0,0 +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" ;