Skip to content
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

Jump to bottom

Update doc for tooltip custom theme #91

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Update doc for tooltip custom theme #91

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e501f0e
Update doc for tooltip custom theme
tuanthieu2993 Oct 3, 2018
48f60b6
Update creating them link
tuanthieu2993 Apr 5, 2019
3ac4c70
Merge branch 'master' into chore/update-doc-for-custom-theme
tuanthieu2993 Jan 2, 2020
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
23 changes: 19 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,8 @@ const HeaderWithTooltip = withTooltip(Header, {
|onShown|noop|function|Callback when the tooltip has fully transitioned in and is showing|
|onHide|noop|function|Callback when the tooltip has begun to transition out|
|onHidden|noop|function|Callback when the tooltip has fully transitioned out and is hidden|
|theme|`dark`|`dark` `light` `transparent`|The CSS styling theme.|
|className|''|string|className of container|
|theme|`dark`|`dark` `light` `transparent` `any_custom_theme`|The CSS styling theme for tooltip|
|className|''|string|className of tooltip trigger element|
|style|{}|React inline style (object)|style of container|


Expand Down Expand Up @@ -219,9 +219,9 @@ react-tippy provides `useContext` for Tooltip component. It can allow you to use
</Tooltip>
```

## Could I change tooltip style (width, height, ...)?
## Could I change tooltip style (width, height, ...) or add theme or className to tooltip?

You can change css to have your tooltip width. If you use `html` props, you can do like this:
className and style are used for customizing the wrapped element ( the one will trigger the tooltip ), so in case you want to customize your tooltip in just few components, your can use `html` instead of `title`, like this:

```javascript
html={(
Expand All @@ -231,6 +231,21 @@ html={(
)}
```

If you want to customize all tooltips, or even use your own theme, you can create your css theme as here
https://atomiks.github.io/tippyjs/themes/#creating-a-theme

create a custom theme like this
```css
.my-custom-theme { /* must be end with -theme */
border: 5px solid red;
}
```

then pass it as theme (they can have multiple themes)
```js
<Tooltip
theme="my-custom light" // <- react-tippy will auto add postfix -theme so remove it here
```

# License
MIT. Also check Popper.js' license.