https://github.com/chandrahaswtw/ellipsis-tooltip-react-chan
Hi there, this npm package helps in truncating the overflown text or inline element with ellipsis & shows tooltip on hover.
https://github.com/chandrahaswtw/ellipsis-tooltip-react-chan
babel react react-tooltip typescript uuid webpack
Last synced: 12 months ago
JSON representation
Hi there, this npm package helps in truncating the overflown text or inline element with ellipsis & shows tooltip on hover.
- Host: GitHub
- URL: https://github.com/chandrahaswtw/ellipsis-tooltip-react-chan
- Owner: chandrahaswtw
- Created: 2020-10-23T16:56:45.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-07T12:47:28.000Z (almost 5 years ago)
- Last Synced: 2024-10-07T14:17:36.844Z (over 1 year ago)
- Topics: babel, react, react-tooltip, typescript, uuid, webpack
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ellipsis-tooltip-react-chan
- Size: 108 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ellipsis-tooltip-react-chan
> Hi there, this package helps in truncating the overflown text or inline element with ellipsis & shows tooltip on hover. It comes into effect only when the text is overflown, else it looks like a normal element. This is dynamic i.e., when screen is minimized, more elements get truncated & it dynamically show tooltips wherever necessary.
This uses [react-tooltip](https://www.npmjs.com/package/react-tooltip) package to display truncated content & [uuid](https://www.npmjs.com/package/uuid) to generate unique id's for tooltips.
# DEMO
**[CLICK HERE FOR THE DEMO](https://chandrahaswtw.github.io/ellipsis-tooltip-demo/)**
## INSTALLATION
```
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](https://www.npmjs.com/package/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;
```
### Span element
```
Lorem ipsum dolor sit amet consectetur.
```
### Anchor element
```
Lorem ipsum dolor sit amet consectetur
```
### Table cell
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](https://www.npmjs.com/package/react-tooltip) documentation for more information. I have briefly mentioned about styling the tooltip in my [DEMO](https://chandrahaswtw.github.io/ellipsis-tooltip-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]);
```
# FINAL NOTE
I am extremely glad that you thought of using this package in you project. If you like my work, I would really appreciate if you provide a **star** on [github repo](https://github.com/chandrahaswtw/ellipsis-tooltip-react-chan). If you stumble across any issues, kindly raise an issue for the same.