positioning issue

[daniellupascu]

Seems like the tooltip will always render in the center of the screen. No matter where the target is positioned, the tooltip component will show the duplicated children in the center of the screen. In the image attached, the target has no positioning styling, just size, and background.

[noumantahir]

Facing exactly the same issue...

[cihannam]

Same issue

[michalpleszczynski]

checkout the answer here: #101 (comment)

adding useInteractionManager={true} might help

[cihannam]

checkout the answer here: #101 (comment)

adding useInteractionManager={true} might help

i added useInteractionManager={true} but nothing changed.

[mwerder]

Same issue here.
adding useInteractionManager={true} didn't help. Any other suggestions?

[borasumer]

I am having the same issue, nobody is maintaining this library anymore?

[jasongaare]

👋🏼 Hey unfortunately I do not currently have time to commit to this project, though it is on the back burner when my time clears up.

PRs are always welcome if someone knows a solution.

[JetPlaneJJ]

Seems like the tooltip will always render in the center of the screen. No matter where the target is positioned, the tooltip component will show the duplicated children in the center of the screen. In the image attached, the target has no positioning styling, just size, and background.

Hi @daniellupascu, may I ask how you were able to change the background color of the entire tooltip? Whenever I try doing that, the color only shows up in a smaller square inside the tooltip, not including the triangle. This is my Snack example attempting to change the background color.

[jeffelector]

I Have the same probleam

[amin79]

same problem here.

[birdwell]

Same problem as well.

[Caliman-Nicolae]

The problem is in your styling, I had the same issue and fixed by changing some components dimensions/alignment. try to comment some styles.

[Saikedo]

Had the same issue, for me, wrapping the Tooltip in a view and giving a alignSelf style of flex-start or center to the parent view fixed the issue.

[SandroHorvat]

same here

[apfritts]

@Saikedo do you know why that solution works? I have a pretty plain view and needed to add the alignSelf tag to the view containing the Tooltip to get it positioned properly. Without alignSelf, it just centered in the screen. I'm evaluating this library to use (it looks like the best so far...) but I want to understand how much TLC I'll need to do to use it.

For simplicity, here is a abridged version of my view:

export default () => {
  const [toolTipVisible, setToolTipVisible] = useState(false)

  return (
    <View style={styles.container}>
      <ScrollView showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false}>
        <View style={styles.row}>
          <Text style={styles.text}>There is some text in here</Text>
        </View>
        <View style={styles.row}>
          <Text style={styles.text}>And some buttons...</Text>
          <Button title={'Do something'} onPress={tapDoSomething} />
        </View>
        <View style={styles.divider} />
        <View style={{alignSelf: 'flex-start'}}>             <-- added alignSelf here
          <Tooltip
            isVisible={toolTipVisible}
            content={
              <View>
                <Text style={styles.header}>Check this out!</Text>
                <Text style={styles.text}>Can style text</Text>
              </View>
            }
            placement="bottom"
            onClose={() => setToolTipVisible(false)}
          >
            <View style={{backgroundColor: '#F7F7FF'}}>
              <Text onPress={() => setToolTipVisible(true)} style={styles.header}>
                Some text user's might tap on...
              </Text>
            </View>
          </Tooltip>
        </View>
        <View style={styles.row}>
          <Text style={styles.text}>There is some more text in here</Text>
        </View>
        <View style={styles.divider} />
        <View style={styles.row}>
          <Text style={styles.text}>And some more buttons...</Text>
          <Button title={'Do something'} onPress={tapDoSomething} />
        </View>
      </ScrollView>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {flex: 1},
  divider: {backgroundColor: '#CCCCCC', height: 1, margin: 8, marginTop: 0},
  header: {
    fontFamily: 'Lato',
    fontSize: 16,
    marginBottom: 16,
    marginLeft: 16,
    marginRight: 16,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginRight: 16,
  },
  text: {
    fontFamily: 'Lato',
    fontSize: 16,
    marginBottom: 8,
    marginLeft: 16,
    marginRight: 16,
  },
})