@natahouse/react-ellipsis-with-tooltip

react-ellipsis-and-tooltip

Recognizes whether a text element is overflowed,

truncates (with ellipsis) it and adds bootstrap's tooltip.

Try via stroybook

Usage

1. Install package

   npm install --save react-ellipsis-with-tooltip

2. Import it

   import EllipsisWithTooltip from 'react-ellipsis-with-tooltip'

3. Wrap with text elements

Examples

Inside a table cell

<td>
  <EllipsisWithTooltip placement="bottom">
     Lorem Ipsum
  </EllipsisWithTooltip>
<td>      

Wrapping anchor element

<td>
  <EllipsisWithTooltip placement="bottom">
    <a href="#">  Lorem Ipsum </a> 
  </EllipsisWithTooltip>
<td>