rn-tooltip-advance v1.0.3

rn-tooltip-advance

Simple, lightwweight and blazing fast react native tooltip

Expo App if you want to try it out: https://expo.io/@andreixoc/RNTooltipTester

Code for the Expo app is here: https://github.com/andreiCalazans/rnTooltipTester

Install

yarn add rn-tooltip-advance

or

npm install rn-tooltip-advance --save

Usage

import { Text } from 'react-native';
import Tooltip from 'rn-tooltip-advance';

...

<Tooltip popover={<Text>Info here</Text>}>
  <Text>Press me</Text>
</Tooltip>

Props

• backgroundColor
• containerStyle
• height
• highlightColor
• onClose
• onOpen
• pointerColor
• popover
• toggleOnPress
• width
• withOverlay
• overlayColor
• withPointer
• toggleWrapperProps
• tooltipPosition

Reference

backgroundColor

sets backgroundColor of the tooltip and pointer.

containerStyle

Passes style object to tooltip container

height

Tooltip container height. Necessary in order to render the container in the correct place. Pass height according to the size of the content rendered inside the container.

highlightColor

Color to highlight the item the tooltip is surrounding.

onClose

function which gets called on closing the tooltip.

onOpen

function which gets called on opening the tooltip.

pointerColor

Color of tooltip pointer, it defaults to the backgroundColor if none is passed .

popover

Component to be rendered as the display container.

toggleOnPress

Flag to determine to toggle or not the tooltip on press.

width

Tooltip container width. Necessary in order to render the container in the correct place. Pass height according to the size of the content rendered inside the container.

withOverlay

Flag to determine whether or not dislay overlay shadow when tooltip is open.

overlayColor

Sets backgroundColor of the overlay.

withPointer

Flag to determine whether or not dislay pointer.

toggleWrapperProps

Drills TouchableOpacity Props down to the TouchableOpacity wrapper that toggles the Tooltip.

tooltipPosition

Manually set tooltip position for rendering the tooltip w.r.t. content. Possible values include: -1 (AUTO POSITION), 0 (TOP LEFT), 1 (TOP RIGHT), 2 (BOTTOM RIGHT) and 3 (BOTTOM LEFT)

MIT Licensed