We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Issues with vuetify & syncfusion

Thread ID:





144015 Apr 15,2019 07:27 AM UTC Apr 24,2019 05:58 AM UTC Vue 6
Tags: Data Grid
Alessio Simoni
Asked On April 15, 2019 07:27 AM UTC

Hi, I'm using various syncfusion components in my vuetify project.
I have some issues with vuetify tooltips and vuetify drawer.
Let me explain:
  • In my syncfusion grid I have a column with a vuetify button wrapped in a vuetify tooltip (rendered trough syncfusion template), it works, but wen I click the button and get redirected to neavigation endpoint, te tooltip freezes on the page and stay there until I refresh the page...is there any way to fix this?
  • The vuetify drawer (that hides and shows with a button) works fine in all the pages except the page where I have the syncfusion grid, where it hides but the page is not resized to fill the spece that the drawer was keeping befor gets hidden... how can I solve that?

Alessio Simoni
Replied On April 16, 2019 09:48 AM UTC


Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 16, 2019 12:16 PM UTC

Hi Alessio, 

Thanks for contacting Syncfusion support. 

We have analyzed the problems you are facing, we suspect that the problem may be with the “Vuetify” component.  

Query 1 : the tooltip freezes on the page and stay there until I refresh the page 
Here you have mentioned the tooltip of the vuetify component freezes. So this may be the problem generated from the “Vuetify” component side, when integrating the vuetify component with Syncfusion Grid. This is why the tooltip freezes. So we suggest you to check with “veutify” for the problem. 

Query 2 : The vuetify drawer (that hides and shows with a button) 
We suspect that the problem arise due to some css override between the Syncfusion Grid and Vuetify component. So we suggest you to check for the override of css while intergrating these components. If so, then we suggest you to customize the styles based on your requirement. 

And also we need more details to further look into this and provide a solution and check for the problem is from Syncfusion grid or vuetify component. Could you please share a simple demo sample with the problems you are facing in your application. So that we could validate further and assist you on this scenario. 

Thavasianand S. 

Alessio Simoni
Replied On April 17, 2019 09:18 AM UTC

Hi, thanks for the suggestions!

I solved the drawer issue (it was related to the template used a column of the grid).

the tooltip problem, persists...
I tryied to replace vuetify v-tooltip with syncfusion tooltip (@syncfusion/ej2-vue-popups) but the problem persists...

this is the column of the grid that uses v-tooltip/syncfusion-popup:

in the editTemplate I have this:

< v-tooltip top>
< v-btn slot="activator" outline small icon @click="edit()">
< v-icon small>edit < v-icon>
< v-btn>
< span>Edit< span>
< v-tooltip>

and this is my edit() method:
edit () {
router.push('/edit/' + this.data.id_box);
when I click the button (wrapped in v-tooltip or syncfusion popover), the router navigate to the new view, but the tooltip remains on
the page and I cannot remove it...it stays there forever even if I navigate to a new page, the only way to remove it is to reload the page.
Any suggestion?


Pavithra Subramaniyam [Syncfusion]
Replied On April 17, 2019 10:11 AM UTC

Hi Alessio, 
Thanks for your update. 
Query : the router navigate to the new view, but the tooltip remains on the page and I cannot remove it 
We have prepared a sample to check the syncfusion grid component’s interference in the vuetify tooltip component during the destruction of the components, but we are unable to reproduce such kind of issue in the grid component side. So we would like you to verify it from the vuetify component for any errors. Please refer to the below sample for your reference, 
Please get back to us for further assistance. 
Pavithra S. 

Alessio Simoni
Replied On April 18, 2019 08:11 AM UTC

thanks for your answer.
Your example works fine, but if you change the edit method to:

edit () {

you will see the problem.
when the routing starts and change the view, the tooltip stays there on the screen and does not disapper...

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 24, 2019 05:58 AM UTC

Hi Alessio, 

We have analyzed the reported problem. We could reproduce the problem during routing only when the template has the “Vuetify app”(v-app). If the template has a normal div, then the tooltip problem is not arising. So we suspect that the problem is with the Vuetify. We are attaching the sample with proper destroying of Vuetify tooltip with normal div for your convenience, please download the sample form the link below, 

We searched for the similar problem over the internet and found some general solutions involving the same problem you are facing and which could solve the problem you are facing. Please refer the general link for more information, 

Please get back to us if you need further assistance. 

Thavasianand S. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon