alopeyk-tooltip v1.0.8

alopeyk-tooltip

Tooltip for React-native

Getting started

$ npm install alopeyk-tooltip --save

Mostly automatic installation

$ react-native link alopeyk-tooltip

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]

2. Go to node_modules ➜ alopeyk-tooltip and add Tooltip.xcodeproj

3. In XCode, in the project navigator, select your project. Add libTooltip.a to your project's Build Phases ➜ Link Binary With Libraries

4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.alopeyk.nativemodule.tooltip.TooltipPackage; to the imports at the top of the file

• Add new TooltipPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

include ':alopeyk-tooltip'

project(':alopeyk-tooltip').projectDir = new File(rootProject.projectDir, '../node_modules/alopeyk-tooltip/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

compile project(':alopeyk-tooltip')

Usage

import Tooltip from 'alopeyk-tooltip';

• By React View

<Tooltip 
	text={"Description"} 
	visible={this.state.visible} 
	target={this.state.target} 
	parent={this.state.parent}
	onClick={(e) => {
		if(e.position === Tooltip.ClickPosition.OVERLAY){
			Tooltip.dismiss();
		}
	}}
	... />

• By React Method

Tooltip.show(
    this.state.target,
    this.state.parent,
    {
        text: 'Description'
    }
)

Methods

Props

• General

• IOS

• Android

Constants

Position: {
  LEFT
  TOP
  RIGHT
  BOTTOM
}

ClickPosition: {
  OVERLAY
  TOOLTIP
  TARGET
}

Gravity  = {
  START
  CENTER
  END
}

Align  = {
  START
  CENTER
  END
}