diff --git a/README.md b/README.md index 796ffa4..5fb01cd 100644 --- a/README.md +++ b/README.md @@ -318,6 +318,74 @@ function App() { } ``` +### `arrow?: string` + +You can customize the arrow display using a custom SVG with round borders as in the +[tippy.js original documentation](https://atomiks.github.io/tippyjs/v6/all-props/#showoncreate) + +First you need to import the basic CSS in your app +```jsx +import 'tippy.js/dist/svg-arrow.css'; +``` +And then you can implement the arrow SVG this way + +```jsx +import React from 'react'; +import Tippy from '@tippyjs/react'; + +import { styled, StyledThemeTypes } from 'styled-components'; + +const SVGArrow = '' + +const Tooltip = ({ children, content }) => ( + + + +) +``` + + +You can also customize and add a "border" effect, using two SVG strings, this way one of them act as border +The following example were using styled-components, but it you can achieve same effect with plain css + +```jsx +import React from 'react'; +import Tippy from '@tippyjs/react'; + +import { styled, StyledThemeTypes } from 'styled-components'; + +const SVGArrow = '' + +const StyledTooltip = styled(Tippy)` + background: red; + border: 1px solid purple; + + & .tippy-arrow { + color: black; + } + + & .tippy-svg-arrow svg{ + fill:purple; + } + & .tippy-svg-arrow svg + svg { + fill: black; + } +` + +const Tooltip = ({ children, content }) => ( + + + +) +``` + + ### Plugins Tippy.js splits certain props into separate pieces of code called plugins to