Description

React Material (v.4). Truncate text and show tooltip if need (Text overflow)

Usage

Install the package

npm install react-material-tc-i4z

Import the module in the place you want to use:

import "react-material-tc-i4z/dist/styles.css";

import TruncateTooltip from "react-material-tc-i4z";

Snippet

simple

const [size, setSize] = useState(200);

<Button
  onClick={() => setSize(400)}
  onClick={() => setSize(200)}
  // style={{
  //    width: size, // => you should update it from css class
  // }}
  >
  <TruncateShowTooltip title="abdc">
    <span // it should be html element.
      style={{
        width: size, // => you should update it from css class
      }}
    >
      Hellofds fdsfsfsfdsdf fdsf s
    </span>
  </TruncateShowTooltip>
</Button>

props

TooltipProps: from react: @material-ui/core

Note

RUN

LIVE EXAMPLE