-
Notifications
You must be signed in to change notification settings - Fork 1
/
Tooltip.vue
168 lines (148 loc) · 5.26 KB
/
Tooltip.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<template>
<Component
:is="tag"
ref="tooltip"
>
<!-- @slot Displays the content of the tooltip -->
<slot />
</Component>
</template>
<script lang="ts">
import {PropType, computed, onBeforeUnmount, ref} from 'vue';
import {tooltipFallbackPlacementProps, tooltipPlacementProps} from '@/composables/useTooltipPlacement';
import {triggerProps} from '@/composables/useTrigger';
import useBootstrapEmits from '@/composables/useBootstrapEmits';
import useBootstrapInstance from '@/composables/useBootstrapInstance';
const tooltipEvents = ['show', 'shown', 'hide', 'hidden', 'inserted'] as const;
type TooltipEvent = typeof tooltipEvents[number];
</script>
<script lang="ts" setup>
const props = defineProps({
/**
* Overflow constraint boundary of the tooltip
*/
boundary: {
type: [String, Object] as PropType<string | HTMLElement>,
default: 'clippingParents',
},
/**
* Appends the tooltip to the given element
*/
container: {
type: [String, Object, Boolean] as PropType<string | HTMLElement | boolean>,
default: false,
},
/**
* The classes that will be forwarded to the tooltip
*/
customClass: {
type: [String, Array, Object],
default: '',
},
/**
* Delay showing and hiding the tooltip in milliseconds
*/
delay: {
type: [Number, Object],
default: 0,
},
/**
* Defines if HTML is allowed in the tooltip
*/
html: {
type: Boolean,
default: false,
},
/**
* The x, y offset of the tooltip
*/
offset: {
type: [String, Array] as PropType<string | number[]>,
default: () => [0, 0],
},
/**
* Change Bootstrap's default Popper config
*/
popperConfig: {
type: [Object, Function],
default: () => ({}),
},
/**
* The tag to be used for the list group item
*/
tag: {
type: String,
default: 'div',
},
/**
* The text to display in the tooltip
*/
title: {
type: [String, Number],
default: '',
},
...tooltipFallbackPlacementProps,
...tooltipPlacementProps,
...triggerProps,
});
const tooltip = ref<HTMLElement>();
const emit = defineEmits<{(event: TooltipEvent): void}>();
const tooltipClass = computed(() => {
if (typeof props.customClass === 'string') {
return props.customClass;
}
if (Array.isArray(props.customClass)) {
return props.customClass.join(' ');
}
return Object.keys(props.customClass)
.filter((key: string) => !!props.customClass[key])
.join(' ');
});
const tooltipTriggers = computed(() => {
if (Array.isArray(props.trigger)) {
return props.trigger.join(' ');
}
return props.trigger;
});
useBootstrapEmits(
tooltip,
tooltipEvents,
emit,
'tooltip',
);
const {bsInstance: bsTooltip} = useBootstrapInstance(
'Tooltip',
tooltip,
{
...props,
customClass: tooltipClass.value,
trigger: tooltipTriggers.value,
},
);
onBeforeUnmount(() => {
bsTooltip.value?.dispose();
});
defineExpose({bsTooltip});
</script>
<docs>
```vue
<Tooltip :fallback-placements="['bottom']">
Insert coin here
</Tooltip>
```
## Imported Props
| Prop name | Description | Type | Values | Default |
| ------------------ | ------------------------------------------ | ----------------------------------------------------------------- | ------------------------------------------ | ---------------------------------- |
| fallbackPlacements | The fallback placements of the component | [TooltipFallbackPlacement](../../composables/useTooltipPlacement) | ['top'\|'bottom'\|'left'\|'right'] | ['top', 'right', 'bottom', 'left'] |
| placement | The default placement of the component | [TooltipPlacement](../../composables/useTooltipPlacement) | ['auto'\|'top'\|'bottom'\|'left'\|'right'] | 'top' |
| trigger | The trigger on which to toggle the trigger | [Trigger](../../composables/useTrigger) | ['click'\|'hover'\|'focus'\|'manual'] | ['hover', 'focus'] |
<!-- TODO Auto-generate based on type? -->
## Events
| Name | Args | Description |
| -------- | ---- | ------------------------------------------------------------------------------------------------------- |
| show | | This event fires immediately when the `show` instance method is called |
| shown | | This event is fired when the popover has been made visible to the user |
| hide | | This event is fired immediately when the `hide` instance method has been called |
| hidden | | This event is fired when the popover has finished being hidden from the user |
| inserted | | This event is fired after the show.bs.tooltip event when the tooltip template has been added to the DOM |
</docs>