question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tooltip Position is not aligned (iOS and Android)

See original GitHub issue

Explain what you did I am using react-native-navigation

I used the <Tooltip> element:

import {Text, Tooltip} from 'react-native-elements';
...
<Tooltip
          backgroundColor={'#fff'}
          popover={<Text>Currently Accessed</Text>}>
          <FontAwesome5 size={25} name="thumbs-up" color="#252cf0" />
</Tooltip>

Expected behavior A tooltip box should appear with the pointed part touching the icon.

Describe the bug The tooltip appeared visibly higher up, with a duplicate of the child icon

Screenshots before clicking before click

after clicking afterclick

android android after

withAndroidStatusBar changed it slightly on Android skipAndroidStatusbar

Your Environment (please complete the following information): I am including the react-native-navigation version because I read here and here that another navigation library caused an issue with determining the right y-axis offset. I tried using the gist described here but it didn’t help and all of the above are really focused on Android, whereas I am having this issue on iOS and Android.

software version
react-native-elements 2.0.2
react-native 0.62.2
react-native-navigation 6.6.2

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:9
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
MagicMirouffcommented, Mar 1, 2022

skipAndroidStatusBar made the trick for me

0reactions
arpitBhallacommented, Mar 2, 2022

Anyone still facing this issue please upgrade to > v4 beta

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bootstrap tooltip in wrong position on initial hover, then in ...
I think the problem is occurring because the div that the tooltip is attached to is absolutely positioned. Here is the div tag...
Read more >
Tooltip Position is not aligned (iOS and Android) - Bountysource
Coming soon: A brand new website interface for an even better experience!
Read more >
How to position tooltips correctly with CSS - Tutorialspoint
To position tooltips correctly, use the right, left, top and bottom properties. Let us see how to position tooltips on the right: ...
Read more >
Understanding the layout and position options for Tooltips
Alignment is how the Tooltip will be positioned relative to the element you have selected. This gives you greater control over where the...
Read more >
Automatic placement of bootstrap tooltip - Oodles Technologies
Tooltip position makes an attempt to automatically change once a parent container has overflow: auto or overflow: scroll.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found