Hi jismol,
Greetings from Syncfusion support.
We understand that when you are click on a routing element
that has a tooltip, the tooltip remains in place even after the page redirects.
This issue occurs due to the target element’s maintenance on page navigation.
To resolve this issue, you can use the close
method of the Tooltip component during the routing operation as mentioned
below. In the shared sample code, we've implemented the Tooltip component on a
routing element and closed the Tooltip by using this method.
Refer to the below code snippet.
|
[HelloWorld.vue]
<li>
<ejs-tooltip ref="tooltip" content="Tooltip content">
<router-link to="/about">About</router-link>
</ejs-tooltip>
</li>
|
|
[App.vue]
<script>
import { version as vueVer } from "vue";
import { TooltipComponent } from "@syncfusion/ej2-vue-popups";
export default {
name: "App",
...
data() {
return {
vueVer: vueVer,
};
},
watch: {
$route(to, from) {
if (document.getElementsByClassName("e-tooltip")[0]
!= undefined) {
document
.getElementsByClassName("e-tooltip")[0]
.ej2_instances[0].close();
}
},
},
};
</script>
|
Sample: https://codesandbox.io/s/hardcore-satoshi-2hkbky
Check out the shared sample for your reference.
