Skip to content

feat: change the build to auto inject css into the page #1014

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 16, 2023
Merged

feat: change the build to auto inject css into the page #1014

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9237e9e
feat: change the build to auto inject css into the page
danielbarion Apr 14, 2023
a0e1c20
fix: add 'use client' directive into tooltip dist files to prevent ne…
danielbarion May 16, 2023
15ef349
docs: update docs to match the next version of react-tooltip
danielbarion May 16, 2023
6212b95
docs: update readme to match the next version of react-tooltip
danielbarion May 16, 2023
bad3476
chore: upgrade docs dependencies version
danielbarion May 16, 2023
23b72d0
docs: remove references to css file
gabrieljablonski May 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 19 additions & 22 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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