4

I want to manually close the tooltip but there are no documents on the react-native-elements site.

So I look over the tooltip code from github and noticed that it has a toggleTooltip function to toggle. Unfortunately I couldn't make it work.

This is the sample code for the tooltip

import { Tooltip } from 'react-native-elements';

render() {
  return (
    <Tooltip 
      ref="tooltip"
      popover={
        <ComponentTest
          toggle={this.refs.tooltip} 
        >
    >
      <Text>Click me</Text>
    </Tooltip>
  );
}

The sample code for the ComponentTest

import { Button } from 'react-native-elements';

toggleOff = () => {
  this.props.toggleTooltip;
}

render() {
  return (
      <Button
        title="hide"
        type="outline"
        onPress={this.toggleOff}
      />
  );
}

And this is the function from the tooltip.js that I am trying to use. The full code of the tooltip can found here https://github.com/react-native-training/react-native-elements/blob/master/src/tooltip/Tooltip.js

toggleTooltip = () => {
  const { onClose } = this.props;
  this.getElementPosition();
  this.setState(prevState => {
    if (prevState.isVisible && !isIOS) {
      onClose && onClose();
    }

    return { isVisible: !prevState.isVisible };
  });
};
Hade Heinrich Camacho
  • 41
  • 1
  • 3

7 Answers7

1

i am new to react-native and was trying to use tooltip, what i found out that whenever u click inside the component which is popovered , it navigates to whatever onpress function u have written on that particular component and the tooltip doesn't closes,,it also remain mounted when u navigate to other pages,,one solution to it is that use react-native-popup-menu.its the best that we can use for now as a tooltip https://www.npmjs.com/package/react-native-popup-menu

Akash Singh
  • 19
  • 1
0

It may be a stupid solution, but did you tried using this.props.toggleTooltip() ?

OH , and ref is not a string anymore, it's a function 

<Tooltip 
      ref={ref => (this.tooltip = ref)}
      popover={
        <ComponentTest
          toggle={this.tooltip} 
        >
    >
RegularGuy
  • 3,516
  • 1
  • 12
  • 29
  • Both didn't work out. It produces an error{ undefined is not an object (evaluating'_this.props.toggle.toggleTooltip') } – Hade Heinrich Camacho Feb 07 '19 at 01:30
  • mmm it may be nested, in line 239 it has `export default withTheme(Tooltip, 'Tooltip');` , the withTheme may be acting as a parent class and the function is one level below. You need to try doing `console.log(Object.keys(this.tooltip))`. And check one by one the keys to see wich one has the tootltip class – RegularGuy Feb 07 '19 at 15:02
  • Error{Requested keys of a value that is not an object.} – Hade Heinrich Camacho Feb 09 '19 at 03:03
  • mmm interesting . i don't think that console.log(JSON.stringify(this.tooltip)) would work... do console.log(this.tooltip) .. or maybe, file an issue in react-native-elements of how to open the tooltip programatically. Maybe the creator of the tooltip answers you – RegularGuy Feb 09 '19 at 14:23
  • Console.log(this.tooltip) only produces undefined. I'll try asking them then. thanks for the time – Hade Heinrich Camacho Feb 12 '19 at 02:50
  • it should not have undefined.. that means that you don't have a reference to the tooltip. It's either a bad implementation of `ref` , or maybe... you are using it inside ComponentTest wich doesn't have this.tooltip defined ... use it in the same class where you have the tooltip, not in the child – RegularGuy Feb 12 '19 at 19:04
0

On line 191 of Tooltip.js:

 <TouchableOpacity onPress={this.toggleTooltip}>
     {this.renderContent(true)}
 </TouchableOpacity>

and in the definition of renderContent:112 on line 137, it is rendered your popover: Thus wherever you touch in your popover will make it disappear. I don't know how to disable this behaviour, but I still want to know if and how the visibility of the popover can be controlled from the Tooltip's child element at least.

Community
  • 1
  • 1
Mihai Manole
  • 195
  • 1
  • 7
0

Just set its style to display:'none' after you touch your popover.

maybe try this way:

state = { theDisplay: 'flex' };

...

componentDidUpdate(prevProps: any) {
    if (!prevProps.isFocused && this.props.isFocused) {
      this.setState({ theDisplay: 'flex' });
    }
}

...

<Popover.Item
    value={'response'}
    onSelect={() => {
        this.setState({ theDisplay: 'none' });
        navigate('NoticeResponse', { id: item.id });
    }}>
    <Text style={styles.toolsItem}>已读信息</Text>
</Popover.Item>

This is my own way of dealing with it. I hope it will help you.

hardworking
  • 1
0

DISCLAIMER I used the ref example in order to get my code to work, but it's something like this:

const tooltipRef = useRef(null);

const foo = (event, index) => {
  event.stopPropagation();
  tooltipRef.current.toggleTooltip()
}
...
<Tooltip
  height={200}
  ref={tooltipRef}
  popover={<TouchableOpacity onPress={(event) => foo(event, index)}
/>

I had originally tried to implement this by simply using the tooltipRef.current.toggleTooltip() like in the example but it never ended up working because the event was propagating and continuing to toggle it on its own (effectively toggling it twice).

Dharman
  • 30,962
  • 25
  • 85
  • 135
Ariel Salem
  • 357
  • 3
  • 12
0

Without any 3rd party library, simple tooltip for both iOS and android can be implemented as follows:

onPress={() =>
  Alert.alert("My Title", "My Msg", [], {
    cancelable: true
  })
}
Harshal
  • 7,562
  • 2
  • 30
  • 20
0

React native elements documentation show that we can manually turn off the tooltip.

Docs

Store a reference to the Tooltip in your component by using the ref prop provided by React

const tooltipRef = useRef(null);

...

<Tooltip
    ref={tooltipRef}
  ...
/>

Then you can manually trigger tooltip from anywhere for example when screen loads:

useEffect(() => {
   tooltipRef.current.toggleTooltip();
}, []);
Supun Athukorala
  • 48
  • 11