React-tooltip: Positioning broken after upgrade 3.0.10 -> 3.0.13

Created on 19 Jul 2016  路  5Comments  路  Source: wwayne/react-tooltip

After I upgraded the library to 3.0.13 I noticed tooltip is no longer pointing to desired place. It has some kind of constant position shift.

Looking at the release notes I guess that

Add support to those elements whose parent elements or itself has been applied with transform

is responsible for that. I use react-list and it uses CSS transform: translate property to scroll a list. Each item of the list contains some elements that have tooltip attached. When I disable transform property in object inspector the list becomes broken but tooltip is displayed correctly.

Most helpful comment

I add a new attribute countTransform whose default value is true. For your case, you should set it to false so that react-tooltip won't count react-list's transform into calculation.

You can use this attribute since 3.1.0

All 5 comments

Actually I did some slight modification on constant position shift for showing the tooltip more nicely... I don't know how much does you mean some kind of constant position shift.

If it is not too much, you can use offset to modify it, but if it appears in a totally wrong place, I need to take a look

I mean It's completely broken and the bottom line is that react-tooltip does not work with react-list.

I am used react-tooltip in my app in many part and confirm - position of tooltip completely broken.
I was need to edit asap markup for tooltip in each part of app, mostly like
position: relative/absolute
margin-top: 30-40px

I add a new attribute countTransform whose default value is true. For your case, you should set it to false so that react-tooltip won't count react-list's transform into calculation.

You can use this attribute since 3.1.0

Great thanks! It works

Was this page helpful?
0 / 5 - 0 ratings