Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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:

  1. In package.json updated element plus dependency version to "^2.2.4"
  2. In tsconfig.json updated types option to"types": ["webpack-env", "element-plus/global"],
  3. Delete node_modules folder and execute npm install again.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(