rc-tc-ifn

react-truncate-tooltip-ifz

LIVE EXAMPLE

---

Description

Change 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)

---

Usage

Install the package

npm install --save react-truncate-tooltip-ifz

Import the module in the place you want to use:

import TooltipIfNeed from "react-truncate-tooltip-ifz";

import "react-truncate-tooltip-ifz/dist/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 or file d.ts

• note

`trigger` and `showSync`: now only supports hover so it's 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