By including this component, you can show tooltip on text overflow. Lets see how to use this library. This library built on top of react-bootstrap so you should install react-bootstrap to use this

Using npm

npm install text-overflow-tooltip --save

Import component

import TextOverflowTooltip from 'react-text-overflow-tooltip';

Usage

Here you can pass maximum width, style, className, tooltip (popover) placement 
<TextOverflowTooltip 
   maxWidth="100px" 
   style={} 
   className="myCustomClass">give some overflow text here
</TextOverflowTooltip>

Full Example

Here you can find full example. 
import React from 'react';
import TextOverflowTooltip from 'react-text-overflow-tooltip';
import '../../node_modules/bootstrap/dist/css/bootstrap.css'
import '../../node_modules/react-text-overflow-tooltip/lib/react-text-overflow-tooltip.css'

export default class App extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>It Works </h1>
        <p>Mouser hover on below text</p>
        <TextOverflowTooltip maxWidth="100px">give some overflow text here</TextOverflowTooltip>
      </div>
    )
  }
}

2 comments:

  1. WOW! I am actually getting ready to across this information, is very helpful for me my friend. Xerox Printer Customer Service I really thankful to you.

    ReplyDelete
  2. To get the information of react text overflow tooltip and the show tooltip on the text overflow using ReactJS and other things like that we can open this link https://www.essayuniverse.net/essayshark-review/. This link can also give us unique ideas wich are so best. We should read this blog and ask the other people to read it.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts