Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit e1f39f9

Browse filesBrowse files
mrholekmrholek
committed
feat(CPopover, CTooltip): add the delay property to enable the delay for the hide and show animations
1 parent ecbd65e commit e1f39f9
Copy full SHA for e1f39f9

File tree

Expand file treeCollapse file tree

2 files changed

+60
-14
lines changed
Filter options
Expand file treeCollapse file tree

2 files changed

+60
-14
lines changed

‎packages/coreui-vue/src/components/popover/CPopover.ts

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/popover/CPopover.ts
+30-7Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ const CPopover = defineComponent({
2121
* Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
2222
*/
2323
content: String,
24+
/**
25+
* The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
26+
*
27+
* @since 4.9.0-beta.2
28+
*/
29+
delay: {
30+
type: [Number, Object] as PropType<number | { show: number; hide: number }>,
31+
default: 0,
32+
},
2433
/**
2534
* Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
2635
*
@@ -98,6 +107,8 @@ const CPopover = defineComponent({
98107
const popoverRef = ref()
99108
const popper = ref()
100109
const visible = ref(props.visible)
110+
const delay =
111+
typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
101112

102113
const handleEnter = (el: RendererElement, done: () => void) => {
103114
emit('show')
@@ -115,9 +126,18 @@ const CPopover = defineComponent({
115126
}, el as HTMLElement)
116127
}
117128

118-
const handleToggle = (event: Event) => {
129+
const toggleVisible = (event: Event, _visible: boolean) => {
119130
togglerRef.value = event.target
120-
visible.value = !visible.value
131+
if (_visible) {
132+
setTimeout(() => {
133+
visible.value = true
134+
}, delay.show)
135+
return
136+
}
137+
138+
setTimeout(() => {
139+
visible.value = false
140+
}, delay.hide)
121141
}
122142

123143
const initPopper = () => {
@@ -208,11 +228,14 @@ const CPopover = defineComponent({
208228
slots.toggler &&
209229
slots.toggler({
210230
on: {
211-
click: (event: Event) => props.trigger.includes('click') && handleToggle(event),
212-
blur: (event: Event) => props.trigger.includes('focus') && handleToggle(event),
213-
focus: (event: Event) => props.trigger.includes('focus') && handleToggle(event),
214-
mouseenter: (event: Event) => props.trigger.includes('hover') && handleToggle(event),
215-
mouseleave: (event: Event) => props.trigger.includes('hover') && handleToggle(event),
231+
click: (event: Event) =>
232+
props.trigger.includes('click') && toggleVisible(event, !visible.value),
233+
blur: (event: Event) => props.trigger.includes('focus') && toggleVisible(event, false),
234+
focus: (event: Event) => props.trigger.includes('focus') && toggleVisible(event, true),
235+
mouseenter: (event: Event) =>
236+
props.trigger.includes('hover') && toggleVisible(event, true),
237+
mouseleave: (event: Event) =>
238+
props.trigger.includes('hover') && toggleVisible(event, false),
216239
},
217240
}),
218241
]

‎packages/coreui-vue/src/components/tooltip/CTooltip.ts

Copy file name to clipboardExpand all lines: packages/coreui-vue/src/components/tooltip/CTooltip.ts
+30-7Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@ const CTooltip = defineComponent({
2121
* Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
2222
*/
2323
content: String,
24+
/**
25+
* The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
26+
*
27+
* @since 4.9.0-beta.2
28+
*/
29+
delay: {
30+
type: [Number, Object] as PropType<number | { show: number; hide: number }>,
31+
default: 0,
32+
},
2433
/**
2534
* Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
2635
*
@@ -94,6 +103,8 @@ const CTooltip = defineComponent({
94103
const tooltipRef = ref()
95104
const popper = ref()
96105
const visible = ref(props.visible)
106+
const delay =
107+
typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
97108

98109
const handleEnter = (el: RendererElement, done: () => void) => {
99110
emit('show')
@@ -111,9 +122,18 @@ const CTooltip = defineComponent({
111122
}, el as HTMLElement)
112123
}
113124

114-
const handleToggle = (event: Event) => {
125+
const toggleVisible = (event: Event, _visible: boolean) => {
115126
togglerRef.value = event.target
116-
visible.value = !visible.value
127+
if (_visible) {
128+
setTimeout(() => {
129+
visible.value = true
130+
}, delay.show)
131+
return
132+
}
133+
134+
setTimeout(() => {
135+
visible.value = false
136+
}, delay.hide)
117137
}
118138

119139
const initPopper = () => {
@@ -196,11 +216,14 @@ const CTooltip = defineComponent({
196216
slots.toggler &&
197217
slots.toggler({
198218
on: {
199-
click: (event: Event) => props.trigger.includes('click') && handleToggle(event),
200-
blur: (event: Event) => props.trigger.includes('focus') && handleToggle(event),
201-
focus: (event: Event) => props.trigger.includes('focus') && handleToggle(event),
202-
mouseenter: (event: Event) => props.trigger.includes('hover') && handleToggle(event),
203-
mouseleave: (event: Event) => props.trigger.includes('hover') && handleToggle(event),
219+
click: (event: Event) =>
220+
props.trigger.includes('click') && toggleVisible(event, !visible.value),
221+
blur: (event: Event) => props.trigger.includes('focus') && toggleVisible(event, false),
222+
focus: (event: Event) => props.trigger.includes('focus') && toggleVisible(event, true),
223+
mouseenter: (event: Event) =>
224+
props.trigger.includes('hover') && toggleVisible(event, true),
225+
mouseleave: (event: Event) =>
226+
props.trigger.includes('hover') && toggleVisible(event, false),
204227
},
205228
}),
206229
]

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.