From e501f0e7b661214bf9edcaaf3849d77ea8dd6076 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pha=CC=A3m=20Tua=CC=82=CC=81n?= Date: Wed, 3 Oct 2018 09:17:02 +0700 Subject: [PATCH 1/2] Update doc for tooltip custom theme --- README.md | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 33cd695..75164d3 100644 --- a/README.md +++ b/README.md @@ -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| @@ -219,9 +219,9 @@ react-tippy provides `useContext` for Tooltip component. It can allow you to use ``` -## 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={( @@ -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 + +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 + Date: Fri, 5 Apr 2019 20:36:34 +0700 Subject: [PATCH 2/2] Update creating them link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 75164d3..1105a0b 100644 --- a/README.md +++ b/README.md @@ -232,7 +232,7 @@ 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 +https://atomiks.github.io/tippyjs/themes/#creating-a-theme create a custom theme like this ```css