react-tooltip-lib v1.1.1

React Tooltip Lib

A simple UI library for light-weight, highly customizable React Tooltip. Very Easy to use and integrate.

Installation

To start with react-tooltip-lib install:

yarn add react-tooltip-lib
// or
npm install --save react-tooltip-lib

Usage

import Tooltip from "react-tooltip-lib";

Example 1.

export default class App extends Component {
  render() {
    return (
      <div>
        <Tooltip
          placement="bottom"
          initialVisibility="show"
          tipContent="This is React Tooltip library"
        />
      </div>
    );
  }
}

Example 2.

// Your designed Component you can export from anywhere
const DesignedContentComponent = function() {
  return <div>Hello ToolTip</div>;
};

export default class App extends Component {
  render() {
    return (
      <div>
        <Tooltip
          placement="bottom"
          initialVisibility="show"
          tipContent={DesignedContentComponent}
        />
      </div>
    );
  }
}

Example 3.

// Your Custom Icon. onClick or onHover you want to open Tooltip Content.By default icon is hint icons
import { ReactComponent as InformationIcon } from "../../icons/information.svg";

// Your designed Component you can export from anywhere
const DesignedContentComponent = function() {
  return <div>Hello ToolTip</div>;
};

export default class App extends Component {
  render() {
    return (
      <div>
        <Tooltip
          placement="bottom"
          initialVisibility="show"
          tipContent={DesignedContentComponent}
        >
          <InformationIcon />
        </Tooltip>
      </div>
    );
  }
}

Properties

• initialVisibility - ToolTip Content By Default Hide..
• tipContent - Tiptool Content Pass as String or Pass and Designed Component

Themes

Example 4.

export default class App extends Component {
  render() {
    return (
      <div>
        <Tooltip
          initialVisibility="show"
          tipTitle="This is React Tooltip library"
          theme="default"
        />
      </div>
    );
  }
}

Properties

• theme - By Default value is default .This value is string.

Trigger

Example 5.

export default class App extends Component {
  render() {
    return (
      <div>
        <Tooltip
          initialVisibility="show"
          tipTitle="This is React Tooltip library"
          trigger="onHover"
        />
      </div>
    );
  }
}

Example 6.

export default class App extends Component {
  render() {
    return (
      <div>
        <Tooltip
          initialVisibility="show"
          tipTitle="This is React Tooltip library"
          trigger="onHover"
        />
      </div>
    );
  }
}

Properties

• trigger - By Default value is onHover .This value is string.

Placement

Example 7.

export default class App extends Component {
  render() {
    return (
      <div>
        <Tooltip placement="top" tipTitle="This is React Tooltip library" />
      </div>
    );
  }
}

Properties

• placement - By Default value is auto .This value is string.

ToopTip Content Layout Desiging Props

Example 8.

export default class App extends Component {
  render() {
    return (
      <div>
        <Tooltip
          tipContentWidth="50px"
          tipTitle="This is React Tooltip library"
        />
      </div>
    );
  }
}

Properties

• tipContentWidth - Tip Content Width.
• borderRadius - Border radius.
• fontWeight - css properties.
• tipTextTransform - Css properties text trasform.
• tipContentPadding - Tip content Padding.
• arrowSize - arrow size between content and icon..
• iconSize - Default Icon Size.
• color - Content Color.
• bg - Background color.

License

MIT © gauravverma029