The tooltip don't follow the position absolute of its child
See original GitHub issueHi 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:
- Created 5 years ago
- Comments:9 (2 by maintainers)
Top GitHub Comments
Hi, I am using
version 0.5.3
but the issue still happens.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.