A react-native wrapper for showing tooltips
Clone or download
Pull request Compare This branch is 5 commits ahead, 41 commits behind chirag04:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Example
ToolTipMenu.xcodeproj
ToolTipMenu
ToolTipMenuTests
.flowconfig
.gitignore
README.md
ToolTip.android.js
ToolTip.ios.js
package.json
screenshot.png

README.md

react-native-tooltip

A react-native component from displaying tooltip. Uses UIMenuController.

Add it to your project

  1. Edit your package.json and add "react-native-tooltip": "git://github.com/taskrabbit/react-native-tooltip.git"
  2. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" (Screenshot) then (Screenshot).
  3. Add libRNToolTipMenu.a to Build Phases -> Link Binary With Libraries (Screenshot).
  4. Whenever you want to use it within React code now you can: var ToolTipText = require('react-native-tooltip');

Props

  • actions: Array of actions [{text: 'Copy', onPress: () => Clipboard.set(this.someValue) }]
  • longPress: Boolean indicating if the tooltip should be showing on longPress, false by default.

Props from TouchableHighlight.propTypes

  • activeOpacity
  • onHideUnderlay
  • onShowUnderlay
  • style
  • underlayColor

You can see the list on the react native website

``

Example

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  PixelRatio,
  View,
} = React;

var ToolTip = require('react-native-tooltip');

var tooltip = React.createClass({
  getInitialState: function() {
    return {
      input: 'chirag',
    }
  },
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.textinputContainer}>
          <ToolTip
            actions={[
              {text: 'x', onPress: () => { this.setState({input: 'x pressed'}) }},
              {text: 'y', onPress: () => { this.setState({input: 'y pressed'}) }}
            ]}
            underlayColor={cssVar('trGray10')}
            longPress={true}
            style={styles.textinput}
          >
            <Text>
              {this.state.input}
            </Text>
          </ToolTip>
        </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  textinputContainer: {
    marginTop: 20,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textinput: {
    width: 60,
    marginVertical: 2,
    marginHorizontal: 2,
    borderWidth: 1 / PixelRatio.get(),
    borderRadius: 5,
    borderColor: '#c7c7cc',
    padding: 2,
    fontSize: 14,
    backgroundColor: 'white',
  },
});

AppRegistry.registerComponent('tooltip', () => tooltip);

Here is how it looks:

Demo gif