react-text-overflow-tooltip: Show tooltip on text overflow using ReactJS

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

text-overflow-tooltip source on Github DEMO

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>
    )
  }
}

→	Convert XML or JSON to Java Pojo Classes
→	Change Icon Color Online

SodhanaLibrary

react-text-overflow-tooltip: Show tooltip on text overflow using ReactJS

Using npm

Import component

Usage

Full Example

21 comments:

Blogroll

Follow this blog by Email

My Online Tools

Catagories

Popular Posts