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: https://github.com/jasongaare/react-native-walkthrough-tooltip/issues/101#issuecomment-736980874

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,
  },
})

[akimabs]

same problem with me

[programminPete]

I had similar problem only on initial load - would be fixed on each next tooltip, so I think it is only a placement issue on initial layout.. I was able to fix by setting the tooltip to be false initially, and then to be visible after a mounting useEffect (if the user hasn't seen it already). Hope that helps :)

Ex:

const checkTooltip = async () => {
    const hasHadAppWalkthrough = await AsyncStorage.getItem(StorageKeys.HAS_HAD_APP_WALKTHROUGH);
    setAppValues({
      tooltip: hasHadAppWalkthrough ? ToolTipVisible.NONE : ToolTipVisible.PROFILE,
    })
  };

  useEffect(() => {
    checkTooltip();
  }, [])

[CyxouD]

@programminPete for me, it doesn't work. However, I think you found the issue correctly, because it works if I show tooltip with delay in seconds, though it makes this approach unreliable (even 3 seconds timeout is not reliable for me in dev environment):

useEffect(() => {
    setTimeout(() => {
      setIsTooltipVisible(true);
    }, 3000);
  }, []);

I use react-native 0.63.4 and 1.3.1 version of the library

[topherPedersen]

I've submitted a pull request with a fix for this issue here: https://github.com/jasongaare/react-native-walkthrough-tooltip/pull/162

My pull request adds a new prop, horizontalAdjustment, similar to the existing topAdjustment prop, which allows horizontal adjustment of the highlighted child view should the library get the alignment wrong. I ran into the same issue described here yesterday, a horizontal alignment problem, and created this new prop to solve this issue in my organization's app.

[Daavidaviid]

I found that giving a width to the component we want highlighted, like width: 100% is working. But that's not a good solution for every use cases

[SaadBinWaheed-empglabs]

I found that giving a width to the component we want highlighted, like width: 100% is working. But that's not a good solution for every use cases

Worked for me.

[mustafaj17]

my work around was to add the following props on the Tooltip showChildInTooltip={false} tooltipStyle={{ marginTop: -35 }}

[sayo96]

horizontal adjustment did not work for this. Does anyone have any other workaround

[MassoudiOmar]

faced the same problem fixed it by wrapping the tooltip with view <View style={{alignItems:"baseline"}} > <ToolTip/> </View> // change the position as you like

[wrightman-henry]

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.

this worked for me! thank you.