# react-responsive-tooltip

> A react responsive tooltip component

Latest version **1.0.0** (published 2017-07-25) · 0 weekly downloads

## Install

```sh
npm install react-responsive-tooltip
pnpm add react-responsive-tooltip
yarn add react-responsive-tooltip
bun add react-responsive-tooltip
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-07-25 |
| First published | 2015-06-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Morgan Laupies |
| Maintainers | damienleroux, lowik, morganlaupies |
| Keywords | react, component, tooltip, tooltip |

## Links

- npm: https://www.npmjs.com/package/react-responsive-tooltip
- Repository: https://github.com/ganmor/react-responsive-tooltip
- Homepage: https://github.com/ganmor/react-responsive-tooltip#readme
- Issues: https://github.com/ganmor/react-responsive-tooltip/issues
- npm.io page: https://npm.io/package/react-responsive-tooltip

## Dependencies (4)

- [immutable](https://npm.io/package/immutable.md) ^3.7.4
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.16.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.18.0
- [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.16.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-07-25
- 0.1.2 — 2017-07-10
- 0.1.1 — 2015-12-23
- 0.1.0 — 2015-12-14
- 0.0.9 — 2015-11-23
- 0.0.8 — 2015-10-27
- 0.0.7 — 2015-10-22
- 0.0.5 — 2015-06-18
- 0.0.4 — 2015-06-18

## README

A React responsive and customizable tooltip component

Works on desktop and touch device.
Displayed on touch on touch device, hidden when any part of the page is touched again

[![](https://img.shields.io/npm/v/react-responsive-tooltip.svg)](https://www.npmjs.com/package/react-responsive-tooltip)
[![](https://img.shields.io/npm/dm/react-responsive-tooltip.svg)](https://www.npmjs.com/package/react-responsive-tooltip)

# Basic Usage

The tooltip has a default style and a default positionning configuration

```
<ToolTip>
  My fabulous tooltip content
</ToolTip>
```

## Available Props

| Prop name     | Prop type     | Default   |
| ------------- |:-------------:| ---------:|
| className     | string        | undefined |
| style         | object        | undefined |
| btnClassName  | string        | undefined |
| btnStyle      | object        | undefined |
| innerStyle    | object        | undefined |
| displayed     | bool          | false     |


# Customization

You can override tooltip popover style with props innerStyle

If you want override some default style, you can import the default style and update it.

```javascript
import defaultInnerStyle from 'react-responsive-tooltip/lib/script/styles/tooltip-inner';
import defaultTriggerStyle from 'react-responsive-tooltip/lib/script/styles/tooltip-trigger';

// defaultInnerStyle is an immutable map
const innerStyle = defaultInnerStyle.set('fontSize', '10pt');
const triggerStyle = defaultTriggerStyle.set('backgroundColor', 'blue');

const triggerLayout = <span className='btn btn-default'>?</span>;

<Tooltip triggerStyle={triggerStyle} triggerLayout={triggerLayout} innerStyle={innerStyle}>
	...
</Tooltip>
```

# Example

```javascript
'use strict';

import Tooltip from 'react-responsible-tooltip';
import React from 'react';

const Example = React.createClass({
	render() {
		return (
			<div>
				<h1>Simple tooltip example</h1>

				<Tooltip>
					<div>
						<div>My tooltip text</div>
						<div>Could be html or another React components
					</div>
				</Tooltip>

				<h1>Customize the trigger tooltip example</h1>

				const trigger = '<span style={{pointer: 'help'}}>Could be text trigger also</span>';
				<Tooltip btnLayout={trigger}>
					<div>Another tooltip text</div>
				</Tooltip>
			</div>
		);
	}
});

export default Example;
```

# Compile es6 sources

```sh
$ npm run compile
```
Sources will be compiled with babel in the lib directory

You must have Babel 6 installed in global
```sh
$ npm install --global babel-cli
```

Babel presets are in devDependencies, don't forget doing
```sh
$ npm install
```

---
_Source: https://npm.io/package/react-responsive-tooltip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._