Hi there, this package helps in truncating the overflown text or inline element with ellipsis & shows tooltip on hover.
npm install ellipsis-tooltip-react-chan
npm install --save ellipsis-tooltip-react-chan
`
NOTE: Type definitions already included to work with typescript
USAGE
All we need is to wrap this with any element that has a fixed width. To configure the tooltip settings, it accepts `options` as prop. From the below example, `place` refers to place of tooltip. It can be `left`,`right`,`top`,`bottom`. You can find more information about other options at
react-tooltip documentation.
NOTE: The effect works only if you pass direct text or any inline or inline-block elements as children. See the examples below:
`
import React from 'react';
import './App.css';
import EllipsisToolTip from "ellipsis-tooltip-react-chan";
function App() {
const options = {
effect: "solid",
place: "top"
}
return (
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, fugiat.
);
}
export default App;
`
$3
`
Lorem ipsum dolor sit amet consectetur.
`
$3
`
Lorem ipsum dolor sit amet consectetur
`
$3
When you are explicitly adding the width to the columns, do not forget to apply `table-layout: fixed` as the table style.
`
Lorem ipsum dolor sit amet consectetur
`
and etc.....
STYLES
When it recieves children, it wraps around an `inline-block` element to give the effect & `inline-block` elements have extra space around them. So, when placed in a table cell or CSS Grid, it gives a wired look. So we can pass style explicitly `float:left` as shown below to prevent this. Use this hack whenever necessary.
`
Lorem ipsum dolor sit amet consectetur
`
By default, the `font` is inherited. If we want to pass any extra styles, you can make use of `style` prop as shown above. This doesn't affect the tooltip styles but only the wrapper I mentioned. If you wish to change the tool tip styles, you need to send the `className` in `options`. Go through the react-tooltip documentation for more information. I have briefly mentioned about styling the tooltip in my DEMO as well under TABLE/CSS GRID section. Have a look if necessary.
DYNAMIC TOOLTIP
You might run into an issue when there is state change and tool tips aren't diplaying properly, you might have to restart the react-toolip as below.
`
import ReactTooltip from "react-tooltip";
useEffect(() => {
ReactTooltip.rebuild();
},[pass dependency array]);
``