accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-11-10 07:40:55 +00:00
Code Issues Releases Activity

fix(ui): add transition effects to Tooltip

Browse Source
This commit is contained in:
18alantom 2022-01-26 20:40:15 +05:30 committed by Alan
parent c55d691768
commit f957e13aea
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Tooltip.vue
View File

@ -1,5 +1,10 @@
<template>
<div id="tooltip" ref="tooltip">
<div
id="tooltip"
ref="tooltip"
style="transition: opacity 100ms ease-in"
:style="{ opacity }"
>
<slot></slot>
</div>
</template>
@ -27,10 +32,15 @@ export default {
placement: { type: String, default: 'auto' },
},
data() {
return { popper: null, virtualElement: null };
return { popper: null, virtualElement: null, opacity: 0 };
},
methods: {
create() {
if (this.popper) {
this.opacity = 1;
return;
}
this.$refs.tooltip.setAttribute('data-show', '');
this.virtualElement = {
getBoundingClientRect: generateGetBoundingClientRect(),
@ -43,6 +53,7 @@ export default {
Object.assign(offset, { options: { offset: [0, this.offset] } }),
],
});
this.opacity = 1;
},
update({ clientX, clientY }) {
if (!this.popper || !this.virtualElement) {
@ -55,8 +66,9 @@ export default {
this.popper.update();
},
destroy() {
this.opacity = 0;
this.$refs.tooltip.removeAttribute('data-show');
this.popper.destroy();
this.popper?.destroy();
this.virtualElement = null;
this.popper = null;
},