Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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:


P
Priyank Patel 4 years ago
Vue
5 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)

user
Lauris Stepanovs Author 4 years ago

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.


P
Priyank Patel 4 years ago

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>


user
Lauris Stepanovs Author 4 years ago

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.


P
Priyank Patel 4 years ago

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:


user
Lauris Stepanovs Author 4 years ago

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(