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 1 commit
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 HeaderWithTootip = 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.

```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/#creating-themes
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Current path is https://atomiks.github.io/tippyjs/#creating-custom-themes

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

now it is https://atomiks.github.io/tippyjs/themes/#creating-a-theme, but thanks for your reminder @KubaJastrz

tuanthieu2993 marked this conversation as resolved.
Show resolved Hide resolved

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.