Vue Tooltip
I was not able to integrate the HTML tooltip that was provided in the theme and I did not find any tooltip in the Vue doc so I implemented element plus tooltip but sometimes randomly it behaves strangely Does Vue demo have a tooltip? so I can integrate that
issue: https://rxteam376-my.sharepoint.com/:i:/g/personal/priyank_patel_rxteam376_onmicrosoft_com/Ea2Ztq4a4rhCm7qr5rVJOIQBsWUHoxRrZokjChOZW0G_Dw?e=H2Z1fj
Replies (5)
Hi,
Could you please specify which Metronic version are you using?
In the latest Metronic version Element UI tooltips seems to be working fine, can you attach your tooltip code usage?
Please check more tooltip usage examples in the official Element UI doc.
https://element-plus.org/en-US/component/tooltip.html#advanced-usage
Hello,
I am using the latest version of the Metronic.
Here's the tooltip usage:
<el-tooltip class="box-item" effect="dark" :content="gengeralConstants.SEARCH" placement="top">
<button type="button" @click.prevent="handleSearch" class="btn btn-icon btn-light btn-sm me-2"><i class="bi bi-search"></i></button>
</el-tooltip>
<el-tooltip class="box-item" effect="dark" :content="gengeralConstants.RESET" placement="top">
<button type="button" @click.prevent="resetSearch" class="btn btn-icon btn-light btn-sm"><i class="bi bi-arrow-counterclockwise"></i></button>
</el-tooltip>Please make sure that a content prop is not empty I just tried your code and replaced content with a string and everything works fine.
No, it's is not empty you can see that in the screenshot, also I just tried with the static content and still the same issue this issue occurs while you switch 3 4 times
<el-tooltip class="box-item" effect="dark" content="SEARCH" placement="top">
<button type="button" @click.prevent="handleSearch" class="btn btn-icon btn-light btn-sm me-2"><i class="bi bi-search"></i></button>
</el-tooltip>
<el-tooltip class="box-item" effect="dark" content="RESET" placement="top">
<button type="button" @click.prevent="resetSearch" class="btn btn-icon btn-light btn-sm"><i class="bi bi-arrow-counterclockwise"></i></button>
</el-tooltip>Screenshot: https://rxteam376-my.sharepoint.com/:i:/g/personal/priyank_patel_rxteam376_onmicrosoft_com/Ebc4Dzy9Q41IrUqRFBKGPvABzVkYt9R-Qo1u_oXqj-dWtQ?e=NQktAf
Hi,
Yes we reproduced this issue, it is related to the element-plus version used in the latest Metronic, we will update an element-plus in an upcoming release.
To fix this now follow steps below:
- In package.json updated element plus dependency version to "^2.2.4"
- In tsconfig.json updated types option to
"types": ["webpack-env", "element-plus/global"], - Delete node_modules folder and execute npm install again.
