React Native Tooltip with Icon and TouchableHighlight?

Question

I am working on a [Tooltip][1] the users can click for an explanation. it looks like this

<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(255, 179, 16)'}>
   <Text>?</Text>
</Tooltip>

The problem with this is that the user needs to click on top of the exact text to work, I wanted to create something like an invisible box around it that the user can click anywhere inside of it to trigger it.

<TouchableHighlight>
   <View style={{height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3'}}>
     <Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
       <Text>?</Text>
     </Tooltip>
   </View>
</TouchableHighlight>

and also tried this

 <Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
     <Icon.Button name="help-circle"
         backgroundColor="##3b5998"
         borderColor="##3b5998"
         color="##3b5998">
     </Icon.Button>
 </Tooltip>

but none of these two works. anyone can advise on what's wrong with my code and how I can fix it. also, any recommendation on how I should deal with text in the future when I need them to be clickable and I want to extend the clickable area to a larger area than just the text itself.

thanks

score 1 · Accepted Answer · answered Nov 13 '19 at 06:34

1

Try this

     <Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
      <View style={{ height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3' }}>
        <Text>?</Text>
      </View>
    </Tooltip>

Basically you have to wrap the element inside tooltip Also look at hitslop property of View to increase touchable area of view , its an alternative to increase touchable area by height and padding

answered Nov 13 '19 at 06:34

Akash Salunkhe

2,698
2
16
31

this actually worked great as far as making the touchable area bigger. is there a way to include an icon with it too? the problem I am having now is that by adding the "?" it kind changed the layout and pushed my switch button to the middle of the screen, is there a way to keep everything the same and adding the "?" where I market with X without changing position of the switch? I added a picture to my original post for reference – Nov 13 '19 at 16:08
I cannot see the picture you have attached to this post – Akash Salunkhe Nov 14 '19 at 06:00

React Native Tooltip with Icon and TouchableHighlight?

1 Answers1