Skip to content

Commit 4fc18ec

Browse files
tmorehousetmorehouse
authored
fix(tooltip+popover components): Delay instantiation on mounted() (#969)
* [tooltip] Delay instantiation of tooltip via $nextTick() * [popover component]: delay instantiation of popover via $nextTick() * [tooltip] Check for '#' in target-id * [popover] remove redundant tests
1 parent 5c35e07 commit 4fc18ec

File tree

2 files changed

+71
-37
lines changed

2 files changed

+71
-37
lines changed

‎lib/components/popover.vue

+36-21
Original file line numberDiff line numberDiff line change
@@ -56,22 +56,21 @@
5656
mounted() {
5757
if (this.targetId) {
5858
let target = this.targetId;
59-
if (!target) {
60-
return;
61-
}
62-
target = document.getElementById(/^#/.test(target) ? target.slice(1) : target);
63-
if (target && !this.popOver) {
64-
// We pass the title & content as part of the config
65-
this.popOver = new PopOver(target, this.getConfig(), this.$root);
66-
this.$on('close', this.onClose);
67-
// Observe content Child changes so we can notify popper of possible size change
68-
observeDom(this.$refs.content, this.updatePosition.bind(this), {
69-
subtree: true,
70-
childList: true,
71-
attributes: true,
72-
attributeFilter: ['class', 'style']
73-
});
74-
}
59+
this.$nextTick(() => {
60+
target = document.getElementById(/^#/.test(target) ? target.slice(1) : target);
61+
if (target && !this.popOver) {
62+
// We pass the title & content as part of the config
63+
this.popOver = new PopOver(target, this.getConfig(), this.$root);
64+
this.$on('close', this.onClose);
65+
// Observe content Child changes so we can notify popper of possible size change
66+
observeDom(this.$refs.content, this.updatePosition.bind(this), {
67+
subtree: true,
68+
childList: true,
69+
attributes: true,
70+
attributeFilter: ['class', 'style']
71+
});
72+
}
73+
});
7574
}
7675
},
7776
updated() {
@@ -101,10 +100,10 @@
101100
offset: this.offset || 0,
102101
triggers: isArray(this.triggers) ? this.triggers.join(' ') : this.triggers,
103102
callbacks: {
104-
show: (evt) => this.$emit('show', evt),
105-
shown: () => this.$emit('shown'),
106-
hide: (evt) => this.$emit('hide', evt),
107-
hidden: () => this.$emit('hidden')
103+
show: (evt) => this.onShow(evt),
104+
shown: (evt) => this.onShown(evt),
105+
hide: (evt) => this.onHide(evt),
106+
hidden: (evt) => this.onHidden(evt)
108107
}
109108
};
110109
}
@@ -136,7 +135,23 @@
136135
cfg.html = true;
137136
}
138137
return cfg;
139-
}
138+
},
139+
onShow(evt) {
140+
this.$emit('show', evt);
141+
},
142+
onShown(evt) {
143+
this.$emit('shown');
144+
},
145+
onHide(evt) {
146+
this.$emit('hide', evt)
147+
},
148+
onHidden(evt) {
149+
// bring our content back if needed to keep Vue happy
150+
// Tooltip class will move it back to $tip when shown again
151+
this.$el.appendChild(this.$refs.title);
152+
this.$el.appendChild(this.$refs.content);
153+
this.$emit('hidden');
154+
}
140155
}
141156
};
142157
</script>

‎lib/components/tooltip.vue

+35-16
Original file line numberDiff line numberDiff line change
@@ -50,18 +50,22 @@
5050
},
5151
mounted() {
5252
if (this.targetId) {
53-
const target = document.body.querySelector(`#${this.targetId}`);
54-
if (target && !this.toolTip) {
55-
// We pass the title as part of the config
56-
this.toolTip = new ToolTip(target, this.getConfig(), this.$root);
57-
// Observe content Child changes so we can notify popper of possible size change
58-
observeDom(this.$refs.title, this.updatePosition.bind(this), {
59-
subtree: true,
60-
childList: true,
61-
attributes: true,
62-
attributeFilter: ['class', 'style']
63-
});
64-
}
53+
let target = this.targetId;
54+
this.$nextTick(() => {
55+
// Ensure we, and target element, are in document
56+
target = document.getElementById(/^#/.test(target) ? target.slice(1) : target);
57+
if (target && !this.toolTip) {
58+
// We pass the title as part of the config
59+
this.toolTip = new ToolTip(target, this.getConfig(), this.$root);
60+
// Observe content Child changes so we can notify popper of possible size change
61+
observeDom(this.$refs.title, this.updatePosition.bind(this), {
62+
subtree: true,
63+
childList: true,
64+
attributes: true,
65+
attributeFilter: ['class', 'style']
66+
});
67+
}
68+
});
6569
}
6670
},
6771
updated() {
@@ -87,10 +91,10 @@
8791
offset: this.offset || 0,
8892
triggers: isArray(this.triggers) ? this.triggers.join(' ') : this.triggers,
8993
callbacks: {
90-
show: (evt) => this.$emit('show', evt),
91-
shown: () => this.$emit('shown'),
92-
hide: (evt) => this.$emit('hide', evt),
93-
hidden: () => this.$emit('hidden')
94+
show: (evt) => this.onShow(evt),
95+
shown: (evt) => this.onShown(evt),
96+
hide: (evt) => this.onHide(evt),
97+
hidden: (evt) => this.onHidden(evt)
9498
}
9599
};
96100
}
@@ -111,6 +115,21 @@
111115
cfg.html = true;
112116
}
113117
return cfg;
118+
},
119+
onShow(evt) {
120+
this.$emit('show', evt);
121+
},
122+
onShown(evt) {
123+
this.$emit('shown');
124+
},
125+
onHide(evt) {
126+
this.$emit('hide', evt)
127+
},
128+
onHidden(evt) {
129+
// bring our content back if needed to keep Vue happy
130+
// Tooltip class will move it back to tip when shown again
131+
this.$el.appendChild(this.$refs.title);
132+
this.$emit('hidden');
114133
}
115134
}
116135
};

0 commit comments

Comments
 (0)