Skip to content

Improve usage guide for default css styling #902

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 2 commits into from
Jan 11, 2023
Merged

Improve usage guide for default css styling #902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
03e3085
docs: improve usage guide for default css styling
gabrieljablonski Jan 11, 2023
3822549
docs: importing the css file is required
gabrieljablonski Jan 11, 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
18 changes: 13 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,15 @@ yarn add react-tooltip

### Using NPM

1 . Require react-tooltip after installation
1 . Import the CSS file to set default styling

```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.

2 . Import `react-tooltip` after installation

```js
import { Tooltip } from 'react-tooltip'
Expand All @@ -59,15 +67,15 @@ or if you want to still use the name ReactTooltip as V4:
import { Tooltip as ReactTooltip } from 'react-tooltip'
```

2 . Add `data-tooltip-content="your placeholder"` to your element
3 . Add `data-tooltip-content="your placeholder"` to your element

```jsx
<p id="my-element" data-tooltip-content="hello world">
Tooltip
</p>
```

3 . Include react-tooltip component
4 . Include react-tooltip component

```jsx
<ReactTooltip anchorId="my-element" />
Expand All @@ -79,9 +87,9 @@ You can import `node_modules/react-tooltip/dist/react-tooltip.[mode].js` into yo

mode: `esm` `cjs` `umd`

If you want to use default ReactTooltip styles, don't forget to import the styles: `node_modules/react-tooltip/dist/react-tooltip.css`
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.

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

![image](https://user-images.githubusercontent.com/9615850/205637814-c0ef01ae-bd77-4e7f-b4bf-df502c71e5c3.png)

Expand Down
2 changes: 0 additions & 2 deletions docs/docs/examples/styling.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,8 +365,6 @@ import 'react-tooltip/dist/react-tooltip.css'

#### Observation

This doc is only if you are importing `import 'react-tooltip/dist/react-tooltip.css'`, if not, you can write your classes by you directly.

With CSS specificity everything can be overridden if you know what are you doing.

The necessity of `!important` was removed because `!important` cut a lot of levels/possibilities related to CSS specificity.
14 changes: 10 additions & 4 deletions docs/docs/getting-started.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,15 @@ yarn add react-tooltip

## Usage

### Set the default styling

```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.
For advanced styling, check [the examples](./examples/styling.mdx).

There are two ways to use ReactTooltip.

1. Using props into ReactTooltip Element.
Expand Down Expand Up @@ -124,9 +133,8 @@ By default, you can't interact with elements inside the tooltip. To allow for pr

### Styling

If you want a styled tooltip, don't forget to add the style file `import 'react-tooltip/dist/react-tooltip.css'`.

Basic styling can be done by overriding the following css variables.
For advanced styling, check [the examples](./examples/styling.mdx).

```css
:root {
Expand All @@ -139,5 +147,3 @@ Basic styling can be done by overriding the following css variables.
--rt-opacity: 0.9;
}
```

For advanced styling, check [the examples](./examples/styling.mdx).