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.

The tooltip don't follow the position absolute of its child

See original GitHub issue

Hi I have a problem with the position absolute of the child of the tooltips. Indeed, the tooltips display where the child should be if its position is not absolute. The behavior i expected is to display the tooltips on the position absolute of the child, the same way it does without the property absolute. I put an example of how I implement the tooltip on my project and which exposes my problem. Hope I have been clear and thanks for your work and for your answers if you have one 😃

`import { StyleSheet, Text, TouchableOpacity, View } from ‘react-native’;

import React from ‘react’; import Tooltip from ‘react-native-walkthrough-tooltip’;

export default class TestScreen extends React.Component { state = { isToolTipsVisible: true, };

constructor(props) { super(props); }

render() { if (this.state.isToolTipsVisible) { return ( <View style={styles.container}> <Tooltip animated content={<Text>Test</Text>} isVisible={this.state.isToolTipsVisible} onClose={() => this.setState({ isToolTipsVisible: false })} placement=“auto” > <TouchableOpacity style={styles.button} onPress={() => { this.setState({ isToolTipsVisible: !this.state.isToolTipsVisible }); }} /> </Tooltip> </View> ); } else { return ( <View style={styles.container}> <TouchableOpacity style={styles.button} onPress={() => { this.setState({ isToolTipsVisible: !this.state.isToolTipsVisible }); }} /> </View> ); } } }

const styles = StyleSheet.create({ container: { width: ‘100%’, height: ‘100%’, backgroundColor: ‘purple’, }, button: { backgroundColor: ‘pink’, position: ‘absolute’, top: 150, left: 150, height: 50, width: 50, }, });`

Issue Analytics

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

github_iconTop GitHub Comments

4reactions
minhnhattonthatcommented, Jul 23, 2019

Hi, I am using version 0.5.3 but the issue still happens.

4reactions
idoamram2gethercommented, Apr 3, 2019

Hi! Any news for this issue? I experience it too. I have a FAB on the bottom right corner and the tooltip just stacked to the bottom-center of the screen.

Read more comments on GitHub >

github_iconTop Results From Across the Web

absolute child element - Don't wrap text until max-width ...
The child DIV shows on hover (a tooltip), but the problem is that the text seems to wrap way earlier than what the...
Read more >
CSS Z-Index Not Working? How to Fix It Using Stack Order
The z-index property of CSS is a tricky one. It won't work easily by itself if you don't know how to use it...
Read more >
Building a simple tooltip component for Blazor in under 10 ...
This means we can then absolute position the child span (tooltip text) where we need, relative to the parent div. The final two...
Read more >
How to make absolute positioned elements overlap their ...
An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent, which means it ...
Read more >
Why your z-index isn't working - DEV Community ‍ ‍
Summary · You have to set the position of an element for the z-index to work · Check to see if the element...
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