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

| Method | Args | Default | Note | | --- | --- | --- | --- | | show | (target: Ref, parent: Ref, Props: Object) | | Show Tooltip | dismiss | | | Dismiss all Tooltips

Props

• General

| Prop | Type | Default | Note | | --- | --- | --- | --- | | text | string | | Text which needs to be displayed | autoHide | bool | true | Should tip view get auto dismiss | | duration | number | 4000| Duration after which tooltip view should be dismissed | | | clickToHide | bool | false | On click should tooltip view be dismissed | | | corner | number | 30 | Radius of corner | tintColor | string | #1F7C82 | Color of tooltip view background | textColor | string | #FFFFFF | Color of text | overlayColor | string | | Color of overlay | textSize | number | 12 | Size of text displayed | gravity | number | Gravity.CENTER | Gravity of text | visible | bool | | Should tooltip be displayed | shadow | bool | true | Shadow on tooltip view | arrow | bool | true | Display Arrow | position | number | Position.Top | Position of the tooltip view | target | object | | Reference of react component of which you need the tooltip | onHide | func | | Event function invoked on tooltip hide | onDisplay | func | | Event function invoked on tooltip display | onPress | func | | Event function invoked on tooltip click

• IOS

| Prop | Type | Default | Note | --- | --- | --- | --- | | parent | object | | Reference of the parent component of which you need the tooltip to fit in

• Android

| Prop | Type | Default | Note | --- | --- | --- | --- | | align | number | Align.CENTER | Alignment of tooltip

Constants

Position: {
  LEFT
  TOP
  RIGHT
  BOTTOM
}

ClickPosition: {
  OVERLAY
  TOOLTIP
  TARGET
}

Gravity  = {
  START
  CENTER
  END
}

Align  = {
  START
  CENTER
  END
}