A straight forward text component with tooltip support when it's truncated

by React

react-texty

A straight forward text component with tooltip support when it's truncated.

View demo View Github

Install

# Yarn
yarn add react-texty

# NPM
npm install --save react-texty

Props

  • tagName string Tag name for the component, defaults to div
  • children node, Should be string or inline element
  • tooltip node Tooltip for the truncated text if set, or the children will be used
  • tooltipClassName string Classname for the tooltip
  • tooltipStyle object Custom style of the tooltip
  • showDelay number Delay milliseconds to show when mouse enter, defaults to 150
  • hideDelay number Delay milliseconds to hide when mouse leave, defaults to 150
  • arrowClassName string Classname for the arrow
  • hideArrow bool Whether to show the tooltip arrow, defaults to false
  • placement top|top-start|top-end|bottom|bottom-start|bottom-end The placement of the tooltip, defaults to top

Usage

import Text from 'react-texty'
// import the styles
import 'react-texty/styles.css'

// just use it as a normal text node
<Text>Hello world</Text>
<Text tagName="a">Hello world</Text>
<Text tooltip="Something else">Hello world</Text>

GitHub