https://github.com/trendmicro-frontend/react-tooltip

React Tooltip component
https://github.com/trendmicro-frontend/react-tooltip

react tooltips

Last synced: 27 days ago
JSON representation

React Tooltip component

• Host: GitHub
• URL: https://github.com/trendmicro-frontend/react-tooltip
• Owner: trendmicro-frontend
• License: mit
• Created: 2017-09-07T09:40:53.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-09-22T13:59:53.000Z (about 1 year ago)
• Last Synced: 2024-10-26T17:17:39.753Z (about 2 months ago)
• Topics: react, tooltips
• Language: JavaScript
• Homepage: https://trendmicro-frontend.github.io/react-tooltip/
• Size: 2.15 MB
• Stars: 2
• Watchers: 18
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - react-tooltip - React Tooltip component ([demo](https://trendmicro-frontend.github.io/react-tooltip/)). (Trend Micro / React Components)
• awesome_frontend_development_resources - react-tooltip - React Tooltip component ([demo](https://trendmicro-frontend.github.io/react-tooltip/)). (Trend Micro / React Components)
• awesome_frontend_development_resources - react-tooltip - React Tooltip component ([demo](https://trendmicro-frontend.github.io/react-tooltip/)). (Trend Micro / React Components)

README

        
# react-tooltip [![build status](https://travis-ci.org/trendmicro-frontend/react-tooltip.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-tooltip) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-tooltip/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-tooltip?branch=master)

[![NPM](https://nodei.co/npm/@trendmicro/react-tooltip.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-tooltip/)

React Tooltip

Demo: https://trendmicro-frontend.github.io/react-tooltip

## Installation

1. Install the latest version of [react](https://github.com/facebook/react) and [react-tooltip](https://github.com/trendmicro-frontend/react-tooltip):

  ```

  npm install --save react @trendmicro/react-tooltip

  ```

2. At this point you can import `@trendmicro/react-tooltip` and its styles in your application as follows:

  ```js

  import { Tooltip, Infotip } from '@trendmicro/react-tooltip';

  // Be sure to include styles at some point, probably during your bootstraping

  import '@trendmicro/react-tooltip/dist/react-tooltip.css';

  ```

## Usage

```js

// Right tooltip

    Settings

// Right tooltip with a function content

 {

        return ({'Right tooltip'});

    }}

>

    Hover on me

// Top tooltip

Hover on me

```

```js

// Infotip

    

    

    Hover on me (infotip with long article)

```

## API

### Properties for Tooltip

Name | Type | Default | Description 

:--- | :--- | :------ | :----------

placement | string | 'right' | One of: 'top', 'right', 'bottom' and 'left'. 
Tooltip will display at placement if possible, otherwise tooltip adjust it's location automatically. 

enterDelay | number | 0 | The delay length (in ms) before the tooltip appears.

leaveDelay | number | 0 | The delay length (in ms) before the tooltip disappears.

hideOnClick | boolean | false | Hide tooltip when target been clicked.

disabled | boolean | false | Disable tooltip.

tooltipClassName | string |  | The className apply to tooltip itself. You can use it to override style if need.

tooltipStyle | object |  | The style apply to tooltip itself. You can use it to override style if need.

content | node or function |  | The tooltip content. Required.

### Properties for Infotip

Name | Type | Default | Description 

:--- | :--- | :------ | :----------

placement | string | 'rightBottom' | One of: 'rightTop', 'rightBottom', 'leftTop', and 'leftBottom'. 
Tooltip will display at placement if possible, otherwise tooltip adjust it's location automatically. 

enterDelay | number | 0 | The delay length (in ms) before the infotip appears.

leaveDelay | number | 0 | The delay length (in ms) before the infotip disappears.

hideOnClick | boolean | false | Hide infotip when target been clicked.

disabled | boolean | false | Disable infotip.

tooltipClassName | string |  | The className apply to infotip itself. You can use it to override style if need.

tooltipStyle | object |  | The style apply to infotip itself. You can use it to override style if need.

content | node or function |  | The infotip content. Required.

## License

MIT