react-truncate-tooltip-ifz v1.0.1-al

Description

Advertising rc-tc-ifn (for search)

• You want to display beauty list data. But some data is oversized and break line, you need to clip and show tooltips for them. Using this.

• Truncate text with ellipsis and show tooltip. (if need)

• It suitable for dropdown list or table list data. (make width better)

Usage

Install the package

npm install --save rc-tc-ifn

Import the module in the place you want to use:

import TooltipIfNeed from "rc-tc-ifn";

import "rc-tc-ifn/build/styles.css";

Snippet

// const [content, setContent] = useState('This is simple tooltip')

// 1. truncate and display tooltip (ex: width > 100px)
<TooltipIfNeed width="100px" right>
    todosomethingxxxlatexxxx
</TooltipIfNeed>
// display: todosomethingxxx
// tooltip: todosomethingxxxlatexxxx   // or pass props tooltipContent

// 2. no truncate and no tooltip (width <= 100px)
<TooltipIfNeed width="100px" right>
    todo work
</TooltipIfNeed>

/* it suitable for dropdown list or table list data */

props

see all props in react-tooltip-z

• note props

`trigger` and `showSync`: now only supports hover so it's disabled.

note

• you should add className and set width from className.

RUN

LIVE EXAMPLE

License

MIT