---
[](https://www.npmjs.com/package/rc-tc-ifn)
[](https://standardjs.com)
---
#### Description
Change [rc-tc-ifn](https://www.npmjs.com/package/rc-tc-ifn)
+ 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)
+ v>= 2.0 (Fix and update better)
+ inject css to js (remove import css)
---
### Usage
Install the package
```js
npm install rc-tc-ifn
```
Import the module in the place you want to use:
```js
import TooltipIfn from "rc-tc-ifn";
```
#### Snippet
```js
// const [content, setContent] = useState('This is simple tooltip')
// 1. truncate and display tooltip (ex: width > 100px)
todosomethingxxxlatexxxx
// display: todosomethingxxx
// tooltip: todosomethingxxxlatexxxx // or pass props tooltipContent
```
```js
// 2. no truncate and no tooltip (width <= 100px)
todo work
/* it suitable for dropdown list or table list data */
```
---
#### props
see all props in [react-tooltip-z](https://www.npmjs.com/package/react-tooltip-z) or file d.ts
+ note
```js
`trigger` and `showSync`: now only supports hover so it is disabled.
```
| props | type | description |
|----------------------|-------------------------------|----------------------------------------------------------------------------|
| tagName | String | Tag wrap & fix size (default `span`) |
| tagTruncate | String | Tag child name (default `span`) |
| truncateClassName | String | Tag truncate className |
| width | `px`, `%` | Set width with for child. Default `no`. |
#### note
`you should add className and set width from className`.
#### RUN
LIVE EXAMPLE
### License
MIT