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

| propName | propType | defaultValue | isRequired | | ----------------- | ----------------------------------- | ------------ | ---------- | | initialVisibility | String | hide | - | | tipContent | String or Pass Functional Component | - | yes |

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.

| propName | propType | defaultValue | otherValues | | -------- | -------- | ------------ | ------------------------------------------------------------------------------- | | theme | String | default | primary,secondary,success,danger,warning,info,light,dark,snow |

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.

| propName | propType | defaultValue | otherValues | | -------- | -------- | ------------ | ------------------- | | onHover | String | onHover | onHover,onHover |

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.

| propName | propType | defaultValue | otherValues | | --------- | -------- | ------------ | ------------------------------------ | | placement | String | auto | auto,left,right,top,bottom |

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.

| propName | propType | defaultValue | otherValues | | ----------------- | -------- | ------------ | --------------- | | tipContentWidth | String | auto | css Properties | | borderRadius | String | 2px | css Properties | | fontSize | String | 12px | css Properties | | fontWeight | String | 400 | css Properties | | tipTextTransform | String | none | css Properties | | tipContentPadding | String | auto | css Properties | | arrowSize | String | 4 | 1,2,3,4,5,6,... | | iconSize | String | 16px | css Properties | | color | String | Hex color | css Properties | | bg | String | Hex color | css Properties |

License

MIT © gauravverma029