Skip to content

Commit e8058a6

Browse files
gabrieljablonskigabrieljablonski
committed
docs: position/float props and general improvements
1 parent 1e9ddd0 commit e8058a6

File tree

2 files changed

+89
-84
lines changed

2 files changed

+89
-84
lines changed

‎docs/docs/options.mdx

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -49,58 +49,61 @@ import 'react-tooltip/dist/react-tooltip.css'
4949

5050
#### Available props
5151

52-
| name | type | required | default | values | description |
53-
| ---------------- | -------------------- | -------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
54-
| className | string | false | | | class name to customize tooltip element |
55-
| classNameArrow | string | false | | | class name to customize tooltip arrow element |
56-
| content | string | false | | | content to de displayed in tooltip (`content` prop is priorized over `html`) |
57-
| html | string | false | | | html content to de displayed in tooltip |
58-
| place | string | false | `top` | `top` `right` `bottom` `left` | place related to anchor element where the tooltip will be rendered if possible |
59-
| offset | number | false | `10` | any `number` | space between the tooltip element and anchor element (arrow not included in calc) |
60-
| id | string | false | React `useId` | any `string` | option to set a specific id into the tooltip element, the default value is handled by React `useId` introduced on React 18 |
61-
| anchorId | string | false | `undefined` | any `string` | id reference from the element that the tooltip will be positioned around |
62-
| variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | change the colors of tooltip with pre-defined values |
63-
| wrapper | valid element | false | `div` | `ElementType` `div` `span` | element wrapper of tooltip container, can be `div`, `span` or any valid Element |
64-
| children | valid React children | false | `undefined` | valid React children | content can be pass through props, data-attributes or as children, children will be priorized over other options |
65-
| events | array | false | `hover` | `hover` `click` | pre-defined events to handle show or hide tooltip |
66-
| positionStrategy | string | false | `absolute` | `absolute` `fixed` | the position strategy used for the tooltip. set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container |
67-
| delayShow | number | false | | any `number` | tooltip show will be delayed in miliseconds by the amount of value |
68-
| delayHide | number | false | | any `number` | tooltip hide will be delayed in miliseconds by the amount of value |
69-
| noArrow | boolean | false | `false` | `true` `false` | tooltip arrow will not be shown |
70-
| style | CSSProperties | false | | any React inline style | add styles directly to the component by `style` attribute |
71-
| isOpen | boolen | false | handled by internal state | `true` `false` | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |
72-
| setIsOpen | function | false | | | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |
52+
| name | type | required | default | values | description |
53+
| ---------------- | -------------------------- | -------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
54+
| className | string | false | | | class name to customize tooltip element |
55+
| classNameArrow | string | false | | | class name to customize tooltip arrow element |
56+
| content | string | false | | | content to de displayed in tooltip (`content` prop is priorized over `html`) |
57+
| html | string | false | | | html content to de displayed in tooltip |
58+
| place | string | false | `top` | `top` `right` `bottom` `left` | place related to anchor element where the tooltip will be rendered if possible |
59+
| offset | number | false | `10` | any `number` | space between the tooltip element and anchor element (arrow not included in calc) |
60+
| id | string | false | React `useId` | any `string` | option to set a specific id into the tooltip element, the default value is handled by React `useId` introduced on React 18 |
61+
| anchorId | string | false | `undefined` | any `string` | id reference from the element that the tooltip will be positioned around |
62+
| variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | change the colors of tooltip with pre-defined values |
63+
| wrapper | valid element | false | `div` | `ElementType` `div` `span` | element wrapper of tooltip container, can be `div`, `span` or any valid Element |
64+
| children | valid React children | false | `undefined` | valid React children | content can be pass through props, data-attributes or as children, children will be priorized over other options |
65+
| events | array | false | `hover` | `hover` `click` | pre-defined events to handle show or hide tooltip |
66+
| positionStrategy | string | false | `absolute` | `absolute` `fixed` | the position strategy used for the tooltip. set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container |
67+
| delayShow | number | false | | any `number` | tooltip show will be delayed in miliseconds by the amount of value |
68+
| delayHide | number | false | | any `number` | tooltip hide will be delayed in miliseconds by the amount of value |
69+
| float | boolean | false | `false` | `true` `false` | tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
70+
| noArrow | boolean | false | `false` | `true` `false` | tooltip arrow will not be shown |
71+
| style | CSSProperties | false | | any React inline style | add styles directly to the component by `style` attribute |
72+
| position | `{ x: number; y: number }` | false | | any `number` value for both `x` and `y` | override the tooltip position on the viewport |
73+
| isOpen | boolen | false | handled by internal state | `true` `false` | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip (can be used **without** `setIsOpen`) |
74+
| setIsOpen | function | false | | | the tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |
7375

7476
### Data attributes
7577

7678
```jsx
7779
import { Tooltip } from 'react-tooltip';
7880
import 'react-tooltip/dist/react-tooltip.css';
7981

80-
<a id="attributes-basic" data-content="hello world!"> ◕‿‿◕ </a>
82+
<a id="attributes-basic" data-tooltip-content="hello world!"> ◕‿‿◕ </a>
8183

8284
<Tooltip anchorId="attributes-basic" />
8385
```
8486

85-
<TooltipAnchor id="attributes-basic" data-content="hello world!">
87+
<TooltipAnchor id="attributes-basic" data-tooltip-content="hello world!">
8688
◕‿‿◕
8789
</TooltipAnchor>
8890
<Tooltip anchorId="attributes-basic" />
8991

9092
#### Available attributes
9193

92-
| name | type | required | default | values | description |
93-
| ------------------------------ | ------ | -------- | ---------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
94-
| data-tooltip-content | string | false | | | content to de displayed in tooltip (`content` prop is priorized over `html`) |
95-
| data-tooltip-html | string | false | | | html content to de displayed in tooltip |
96-
| data-tooltip-place | string | false | `top` | `top` `right` `bottom` `left` | place related to anchor element where the tooltip will be rendered if possible |
97-
| data-tooltip-offset | number | false | `10` | any `number` | space between the tooltip element and anchor element (arrow not included in calc) |
98-
| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | change the colors of tooltip with pre-defined values |
99-
| data-tooltip-wrapper | string | false | `div` | `div` `span` | element wrapper of tooltip container, can be `div`, `span` or any valid Element |
100-
| data-tooltip-events | string | false | `hover` | `hover click` `hover` `click` | pre-defined events to handle show or hide tooltip |
101-
| data-tooltip-position-strategy | string | false | `absolute` | `absolute` `fixed` | the position strategy used for the tooltip. set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container |
102-
| data-tooltip-show | number | false | | any `number` | tooltip show will be delayed in miliseconds by the amount of value |
103-
| data-tooltip-hide | number | false | | any `number` | tooltip hide will be delayed in miliseconds by the amount of value |
94+
| name | type | required | default | values | description |
95+
| ------------------------------ | ------- | -------- | ---------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
96+
| data-tooltip-content | string | false | | | content to de displayed in tooltip (`content` prop is priorized over `html`) |
97+
| data-tooltip-html | string | false | | | html content to de displayed in tooltip |
98+
| data-tooltip-place | string | false | `top` | `top` `right` `bottom` `left` | place related to anchor element where the tooltip will be rendered if possible |
99+
| data-tooltip-offset | number | false | `10` | any `number` | space between the tooltip element and anchor element (arrow not included in calc) |
100+
| data-tooltip-variant | string | false | `dark` | `dark` `light` `success` `warning` `error` `info` | change the colors of tooltip with pre-defined values |
101+
| data-tooltip-wrapper | string | false | `div` | `div` `span` | element wrapper of tooltip container, can be `div`, `span` or any valid Element |
102+
| data-tooltip-events | string | false | `hover` | `hover click` `hover` `click` | pre-defined events to handle show or hide tooltip |
103+
| data-tooltip-position-strategy | string | false | `absolute` | `absolute` `fixed` | the position strategy used for the tooltip. set to `fixed` if you run into issues with `overflow: hidden` on the tooltip parent container |
104+
| data-tooltip-show | number | false | | any `number` | tooltip show will be delayed in miliseconds by the amount of value |
105+
| data-tooltip-hide | number | false | | any `number` | tooltip hide will be delayed in miliseconds by the amount of value |
106+
| data-tooltip-float | boolean | false | `false` | `true` `false` | tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
104107

105108
#### Observations
106109

0 commit comments

Comments
 (0)