Skip to content

Commit

Permalink
Merge pull request #1014 from ReactTooltip/feat/auto-inject-css
Browse files Browse the repository at this point in the history 
feat: change the build to auto inject css into the page
  • Loading branch information
@danielbarion
danielbarion authored May 16, 2023
2 parents 7de068a + 23b72d0 commit cdc1a74
Show file tree
Hide file tree
Showing 23 changed files with 423 additions and 543 deletions.
41 changes: 19 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
[![npm download][download-image]][download-url]
![minified](https://badgen.net/bundlephobia/min/react-tooltip)
![minified gzip](https://badgen.net/bundlephobia/minzip/react-tooltip)

<!-- ![last commit](https://badgen.net/github/last-commit/reacttooltip/react-tooltip) -->

[download-image]: https://img.shields.io/npm/dm/react-tooltip.svg?style=flat-square
Expand All @@ -17,7 +18,7 @@
</a>
</p>

If you like the project, please give the project a GitHub 🌟
If you like the project, please give the project a GitHub 🌟

## Demo

Expand Down Expand Up @@ -55,20 +56,23 @@ yarn add react-tooltip

## Usage

> :warning: ReactTooltip will inject the default styles into the page by default on version `5.13.0` or newer.
> The `react-tooltip/dist/react-tooltip.css` file is only for style reference and doesn't need to be imported manually anymore if you are already using `v5.13.0` or upper.
> :warning: If you were already using `react-tooltip<=5.7.5`, you'll be getting some deprecation warnings regarding the `anchorId` prop and some other features.
In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details.
> In versions >=5.8.0, we've introduced the `data-tooltip-id` attribute, and the `anchorSelect` prop, which are our recommended methods of using the tooltip moving forward. Check [the docs](https://react-tooltip.com/docs/getting-started) for more details.
### Using NPM package

1 . Import the CSS file to set default styling.

> :warning: You must import the CSS file or the tooltip won't show!
> :warning: If you are using a version before than `v5.13.0`, you must import the CSS file or the tooltip won't show!
```js
import 'react-tooltip/dist/react-tooltip.css'
```

This needs to be done only once. We suggest you do it on your `src/index.js` or equivalent file.
This needs to be done only once and only if you are using a version before than `5.13.0`. We suggest you do it on your `src/index.js` or equivalent file.

2 . Import `react-tooltip` after installation.

Expand Down Expand Up @@ -123,7 +127,7 @@ You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into yo

mode: `esm` `cjs` `umd`

Don't forget to import the CSS file from `node_modules/react-tooltip/dist/react-tooltip.css` to set default styling. This needs to be done only once in your application.
If you are using a version older than `v5.13.0` don't forget to import the CSS file from `node_modules/react-tooltip/dist/react-tooltip.css` to set default styling. This needs to be done only once in your application. Version `v5.13.0` or newer already inject the default styles into the page by default.

PS: all the files have a minified version and a non-minified version.

Expand All @@ -145,7 +149,7 @@ You can use [`renderToStaticMarkup()` function](https://reactjs.org/docs/react-d
```jsx
import ReactDOMServer from 'react-dom/server';
[...]
<a
<a
data-tooltip-id="my-tooltip"
data-tooltip-html={ReactDOMServer.renderToStaticMarkup(<div>I am <b>JSX</b> content</div>)}
>
Expand All @@ -172,7 +176,7 @@ If there isn't, feel free to [submit a new issue](https://github.com/ReactToolti

### The tooltip is broken/not showing up

Make sure you've imported the default styling. You only need to do this once on your application, `App.jsx`/`App.tsx` is usually a good place to do it.
Make sure you've imported the default styling. You only need to do this once on your application and only if you are using a version before `5.13.0`, `App.jsx`/`App.tsx` is usually a good place to do it.

```jsx
import 'react-tooltip/dist/react-tooltip.css'
Expand All @@ -184,7 +188,7 @@ If `data-tooltip-content` and `data-tooltip-html` are both unset (or they have e

### Next.js `TypeError: f is not a function`

This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
This problem seems to be caused by a bug related to the SWC bundler used by Next.js.
The best way to solve this is to upgrade to `[email protected]` or later versions.

Less ideally, if you're unable to upgrade, you can set `swcMinify: false` on your `next.config.js` file.
Expand All @@ -199,7 +203,7 @@ This is specially relevant when using components that are conditionally rendered

Always try to keep the `<Tooltip />` component rendered, so if you're having issues with a tooltip you've placed inside a component which is placed/removed from the DOM dynamically, try to move the tooltip outside of it.

We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`). You can also move the `import 'react-tooltip/dist/react-tooltip.css'` there.
We usually recommend placing the tooltip component directly inside the root component of your application (usually on `App.jsx`/`App.tsx`).

#### Dynamically generated anchor elements

Expand All @@ -212,18 +216,12 @@ Here's a simple example on how to improve performance when using dynamically gen
```jsx
// ❌ BAD
<div className="items-container">
{
myItems.map(({ id, content, tooltip }) => (
<div
key={id}
className="item"
data-tooltip-id={`tooltip-${id}`}
>
{content}
<Tooltip id={`tooltip-${id}`} content={tooltip} />
</div>
))
}
{myItems.map(({ id, content, tooltip }) => (
<div key={id} className="item" data-tooltip-id={`tooltip-${id}`}>
{content}
<Tooltip id={`tooltip-${id}`} content={tooltip} />
</div>
))}
</div>
```

Expand Down Expand Up @@ -268,7 +266,6 @@ Here's a simple example on how to improve performance when using dynamically gen

[wwayne](https://github.com/wwayne) (inactive) - Creator of the original React Tooltip (V1.x ~ V4.x.)


We would gladly accept a new maintainer to help out!

## Contributing
Expand Down
56 changes: 13 additions & 43 deletions docs/docs/examples/anchor-select.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ sidebar_position: 1
Using the ReactTooltip anchor select prop.

import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'

export const TooltipAnchor = ({ children, id, ...rest }) => {
return (
Expand Down Expand Up @@ -48,7 +47,6 @@ A CSS selector for a specific id begins with a `#`. Don't forget to put it befor

```jsx
import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<a id="my-anchor-element-id">◕‿‿◕</a>
<Tooltip
Expand All @@ -59,10 +57,7 @@ import 'react-tooltip/dist/react-tooltip.css';
```

<TooltipAnchor id="my-anchor-element-id">◕‿‿◕</TooltipAnchor>
<Tooltip
anchorSelect="#my-anchor-element-id"
content="Hello world!"
/>
<Tooltip anchorSelect="#my-anchor-element-id" content="Hello world!" />

#### Using class attribute

Expand All @@ -74,7 +69,6 @@ A CSS selector for a specific id begins with a `.`. Don't forget to put it befor

```jsx
import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<a className="my-anchor-element-class">◕‿‿◕</a>
<a className="my-anchor-element-class">◕‿‿◕</a>
Expand All @@ -88,23 +82,12 @@ import 'react-tooltip/dist/react-tooltip.css';
```

<div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
<TooltipAnchor className="my-anchor-element-class">
◕‿‿◕
</TooltipAnchor>
<TooltipAnchor className="my-anchor-element-class">
◕‿‿◕
</TooltipAnchor>
<TooltipAnchor className="my-anchor-element-class">
◕‿‿◕
</TooltipAnchor>
<TooltipAnchor className="my-anchor-element-class">
◕‿‿◕
</TooltipAnchor>
<TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
<TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
<TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
<TooltipAnchor className="my-anchor-element-class">◕‿‿◕</TooltipAnchor>
</div>
<Tooltip
anchorSelect=".my-anchor-element-class"
content="Hello world!"
/>
<Tooltip anchorSelect=".my-anchor-element-class" content="Hello world!" />

### Complex selectors

Expand All @@ -122,7 +105,6 @@ This example uses the name attribute, but it works for any HTML attribute (id, c

```jsx
import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<a name="my-anchor-element-1">◕‿‿◕</a>
<a name="my-anchor-element-2">◕‿‿◕</a>
Expand All @@ -135,23 +117,12 @@ import 'react-tooltip/dist/react-tooltip.css';
```

<div style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}>
<TooltipAnchor name="my-anchor-element-1">
◕‿‿◕
</TooltipAnchor>
<TooltipAnchor name="my-anchor-element-2">
◕‿‿◕
</TooltipAnchor>
<TooltipAnchor name="my-anchor-element-3">
◕‿‿◕
</TooltipAnchor>
<TooltipAnchor name="my-anchor-element-4">
◕‿‿◕
</TooltipAnchor>
<TooltipAnchor name="my-anchor-element-1">◕‿‿◕</TooltipAnchor>
<TooltipAnchor name="my-anchor-element-2">◕‿‿◕</TooltipAnchor>
<TooltipAnchor name="my-anchor-element-3">◕‿‿◕</TooltipAnchor>
<TooltipAnchor name="my-anchor-element-4">◕‿‿◕</TooltipAnchor>
</div>
<Tooltip
anchorSelect="[name^='my-anchor-element-']"
content="Hello world!"
/>
<Tooltip anchorSelect="[name^='my-anchor-element-']" content="Hello world!" />

#### Child selector

Expand All @@ -165,7 +136,6 @@ Often you can just use a class selector or something else much simpler.

```jsx
import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<section id="section-anchor-select" style={{ marginTop: '100px' }}>
<a>◕‿‿◕</a>
Expand All @@ -183,7 +153,7 @@ import 'react-tooltip/dist/react-tooltip.css';
/>
```

<section
<section
id="section-anchor-select"
style={{ display: 'flex', gap: '5px', width: 'fit-content', margin: 'auto' }}
>
Expand All @@ -199,4 +169,4 @@ import 'react-tooltip/dist/react-tooltip.css';
<Tooltip
anchorSelect="section[id='section-anchor-select'] > span:nth-child(even)"
content="I am an even child!"
/>
/>
39 changes: 22 additions & 17 deletions docs/docs/examples/basic-examples.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ sidebar_position: 0
Some basic examples of how to use the ReactTooltip component.

import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'

export const TooltipAnchor = ({ children, id, ...rest }) => {
return (
Expand Down Expand Up @@ -38,7 +37,6 @@ export const TooltipAnchor = ({ children, id, ...rest }) => {

```jsx
import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<a data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
◕‿‿◕
Expand All @@ -49,7 +47,15 @@ import 'react-tooltip/dist/react-tooltip.css';
<Tooltip id="my-tooltip" />
```

<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: 'fit-content',
margin: 'auto',
gap: '5px',
}}
>
<TooltipAnchor data-tooltip-id="my-tooltip" data-tooltip-content="Hello world!">
◕‿‿◕
</TooltipAnchor>
Expand All @@ -61,25 +67,20 @@ import 'react-tooltip/dist/react-tooltip.css';

### Props


#### Using anchor element `id`

```jsx
import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css'

<a id="my-anchor-element">◕‿‿◕</a>
<Tooltip
<Tooltip
anchorSelect="#my-anchor-element"
content="Hello world!"
/>
```

<TooltipAnchor id="my-anchor-element">◕‿‿◕</TooltipAnchor>
<Tooltip
anchorSelect="#my-anchor-element"
content="Hello world!"
/>
<Tooltip anchorSelect="#my-anchor-element" content="Hello world!" />

#### Using anchor elements `className`

Expand All @@ -91,21 +92,25 @@ Check the [Anchor select examples](./anchor-select.mdx) for more complex use cas

```jsx
import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css'

<a className="my-anchor-element">◕‿‿◕</a>
<a className="my-anchor-element">◕‿‿◕</a>
<Tooltip
<Tooltip
anchorSelect=".my-anchor-element"
content="Hello world!"
/>
```

<div style={{ display: 'flex', flexDirection: 'row', width: 'fit-content', margin: 'auto', gap: '5px' }}>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: 'fit-content',
margin: 'auto',
gap: '5px',
}}
>
<TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
<TooltipAnchor className="my-anchor-element">◕‿‿◕</TooltipAnchor>
</div>
<Tooltip
anchorSelect=".my-anchor-element"
content="Hello world!"
/>
<Tooltip anchorSelect=".my-anchor-element" content="Hello world!" />
2 changes: 0 additions & 2 deletions docs/docs/examples/children.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ sidebar_position: 1
Using children for setting the ReactTooltip content.

import { Tooltip } from 'react-tooltip'
import 'react-tooltip/dist/react-tooltip.css'

export const TooltipAnchor = ({ children, id, ...rest }) => {
return (
Expand Down Expand Up @@ -41,7 +40,6 @@ This is useful for setting a placeholder for the tooltip content.

```jsx
import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<a data-tooltip-id="my-tooltip">◕‿‿◕</a>
<Tooltip id="my-tooltip">
Expand Down
Loading

0 comments on commit cdc1a74

Please sign in to comment.