zerone2 / react-ellipsis-with-tooltip

truncates (with ellipsis) overflowing text elements and adds a tooltip https://amirfefer.github.io/react-ellipsis-with-tooltip

react-ellipsis-with-tooltip

truncates (with ellipsis) overflowing text elements and adds a tooltip https://amirfefer.github.io/react-ellipsis-with-tooltip

Recognizes whether a text element is overflowed, truncates (with ellipsis) it and adds bootstrap's tooltip. Try via stroybook

Installation

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

or

yarn add react-ellipsis-with-tooltip

Usage

Table cell

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

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

Anchor element

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

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

License

MIT © Amir Fefer