react-ellipsis-tooltip

Recognizes whether a text element is overflowed and shows ellipsis and tooltip.

You can specify isMultilineEllipsis, lineCount and lineHeight to acheieve multiline ellipsis.

Usage

1. Install package

   npm install --save react-ellipsis-tooltip

2. Import it

   import EllipsisTooltip from "react-ellipsis-tooltip";

3. Wrap with text elements

Examples

Inside a table cell

<td>
  <EllipsisTooltip placement="bottom" tooltip="some tooltip text">
      <h1>Lorem Ipsum</h1>
  </EllipsisTooltip>
<td>      

Multiline Ellipsis text

<td>
  <EllipsisTooltip tooltip="some tooltip text" isMultilineEllipsis lineCount={2} lineHeight={2}>
    <h1>Lorem Ipsum</h1>
  </EllipsisTooltip>
<td>      

Prop	Data Type	Default Value	Description
isMultilineEllipsis	Boolean	false	Defines whether to enable multiline ellipsis
lineCount	Number	2	Number of lines after which ellipsis should be displayed
lineHeight	Number	1.2	Specify each line height using this, unit is rem
tooltip*	String	''	This required prop is to show tooltip text when ellipsis arrives
children*	React Element

Roadmap

• Provision to specify custom tooltip component to show the tooltip