Tooltip getting staggering/laggy when hover

[anicache08]

Version 1.1.0

Reproduction link https://demos.creative-tim.com/argon-dashboard-pro-react/#/admin/tables (inline action table)

Operating System Windows 10

Browser & Version Chrome Latest Version

Steps to reproduce 1.- Go to Inline actions table. 2.- Hover to any action button within the table.

What is expected? Show a tooltip when hover

What is actually happening? The tooltip has getting a bit laggy/staggering when hover

[einazare]

Hello there, @anicache08 ,

Thank you for providing this issue. I've checked in to solve this, you will have to change the UncontrolledTooltips from reactstrap, to controlled ones. So, for, example, tooltips with id tooltip12475020 will become from:

<a
  className="table-action table-action-delete"
  href="#pablo"
  id="tooltip12475020"
  onClick={e => e.preventDefault()}
>
  <i className="fas fa-trash" />
</a>
<UncontrolledTooltip delay={0} target="tooltip12475020">
  Delete product
</UncontrolledTooltip>

You will have to replace it with:

state = {
    tooltip12475020: false
  }
...
<a
  className="table-action table-action-delete"
  href="#pablo"
  id="tooltip12475020"
  onClick={e => e.preventDefault()}
>
  <i className="fas fa-trash" />
</a>
<Tooltip placement="right" isOpen={this.state.tooltip12475020} target="tooltip12475020" toggle={() => this.setState({tooltip12475020: !this.state.tooltip12475020})}>
  Delete product
</Tooltip>

Best, Manu

[anicache08]

I think there was a section in the button when hover it gets staggering, however if you point your mouse within the center of the icon button it stops the laggy effect of the action button tooltip.

[devilween]

I have a problem with the actions too, I just don't know if it's the same, but sometimes the hover area is unstable, changing the color and displaying the tolltip countless times, it happens in firefox and chrome (most recurring cases). but I realized that removing the tooltip and leaving the problem with nothing is "solved".

[einazare]

Hello there, @devilween ,

Can you please provide us with an example video/gif of the issue? Also, we've found out that this issue is somehow caused by Reactstraps UncontrolledTooltip, so to solve the issue, you will have to change the UncontrolledTooltips to controlled ones. Please check my other comment: https://github.com/creativetimofficial/ct-argon-dashboard-pro-react/issues/21#issuecomment-610769689

Best, Manu

[devilween]

I already tried the pointed solution, however it generates another bug that is in the print in PNG, in the video is the original error without the mentioned solution.

Print PNG ( #21 (comment) ) - https://drive.google.com/file/d/1Pam0a4moG3KYxBnyNuv-ufLQad7_FwB0/view?usp=sharing Video with original bug - https://drive.google.com/file/d/1PasjP7Cgis86ZTo5gwSW-8lI4DFpNlgq/view?usp=sharing

[einazare]

Hello again, @devilween ,

Ok, so the video is with the original code, right? That is resolved by my last comment: https://github.com/creativetimofficial/ct-argon-dashboard-pro-react/issues/21#issuecomment-610769689 What is the issue from the image?

Best, Manu

[devilween]

Hello @EINazare Correct, the video is the original code and the image with solution # 21 (comment). However in the image as you can see he opens the tooltip in the 1st and 3rd lines.

[einazare]

Hello there, @devilween ,

That is possible if you've used the same id and the same hooks for both tooltips - you need to have hooks and ids different for each tooltip.

Best, Manu

[devilween]

Hello @EINazare

Now I understood and managed to solve the problem.

Thanks a lot for the help!