Skip to content

Add hidden prop and data-tooltip-hidden attribute #1023

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

Merged
merged 3 commits into from
May 16, 2023
Merged

Add hidden prop and data-tooltip-hidden attribute #1023

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d1067cd
feat: hidden prop and data attribute
gabrieljablonski May 13, 2023
dc099a9
docs: hidden prop and data attribute
gabrieljablonski May 13, 2023
55f1a46
fix: update internal states correctly
gabrieljablonski May 16, 2023
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
6 changes: 4 additions & 2 deletions docs/docs/options.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ import 'react-tooltip/dist/react-tooltip.css';
| data-tooltip-delay-show | number | false | | any `number` | The delay (in ms) before showing the tooltip |
| data-tooltip-delay-hide | number | false | | any `number` | The delay (in ms) before hiding the tooltip |
| 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"`) |
| data-tooltip-hidden | boolean | false | `false` | `true` `false` | Tooltip will not be shown |

### Props

Expand All @@ -98,7 +99,7 @@ import 'react-tooltip/dist/react-tooltip.css'
| name | type | required | default | values | description |
| ------------------ | -------------------------- | --------- | ------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` | `string` | no | | | Class name to customize tooltip element. You can also use the default class `react-tooltip` which is set internally |
| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally |
| `classNameArrow` | `string` | no | | | Class name to customize tooltip arrow element. You can also use the default class `react-tooltip-arrow` which is set internally |
| `content` | `string` | no | | | Content to de displayed in tooltip (`html` prop is priorized over `content`) |
| ~~`html`~~ | ~~`string`~~ | ~~no~~ | | | ~~HTML content to de displayed in tooltip~~ <br/>**DEPRECATED**<br/>Use `children` or `render` instead |
| `render` | `function` | no | | | A function which receives a ref to the currently active anchor element and returns the content for the tooltip. Check the [examples](./examples/render.mdx) |
Expand All @@ -116,12 +117,13 @@ import 'react-tooltip/dist/react-tooltip.css'
| `delayShow` | `number` | no | | any `number` | The delay (in ms) before showing the tooltip |
| `delayHide` | `number` | no | | any `number` | The delay (in ms) before hiding the tooltip |
| `float` | `boolean` | no | `false` | `true` `false` | Tooltip will follow the mouse position when it moves inside the anchor element (same as V4's `effect="float"`) |
| `hidden` | `boolean` | no | `false` | `true` `false` | Tooltip will not be shown |
| `noArrow` | `boolean` | no | `false` | `true` `false` | Tooltip arrow will not be shown |
| `clickable` | `boolean` | no | `false` | `true` `false` | Allow interaction with elements inside the tooltip. Useful when using buttons and inputs |
| `closeOnEsc` | `boolean` | no | `false` | `true` `false` | Pressing escape key will close the tooltip |
| `style` | `CSSProperties` | no | | a React inline style | Add inline styles directly to the tooltip |
| `position` | `{ x: number; y: number }` | no | | any `number` value for both `x` and `y` | Override the tooltip position on the DOM |
| `isOpen` | `boolean` no | 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`) |
| `isOpen` | `boolean` | no | 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`) |
| `setIsOpen` | `function` | no | | | The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip |
| `afterShow` | `function` | no | | | A function to be called after the tooltip is shown |
| `afterHide` | `function` | no | | | A function to be called after the tooltip is hidden |
Expand Down
1 change: 1 addition & 0 deletions docs/docs/upgrade-guide/changelog-v4-v5.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ If you run into any problems with the tooltip not updating after changes are mad
- [x] `setIsOpen` - `function` (to control tooltip state) - if not used, tooltip state will be handled internally
- [x] `position` - `{ x: number; y: number }` - similar to V4's `overridePosition`
- [x] `float` - `boolean` - used to achieve V4's `effect="float"`
- [x] `hidden` - `boolean` - when set, the tooltip will not show
- [x] `render` - `function` - can be used to render dynamic content based on the active anchor element (check [the examples](../examples/render.mdx) for more details)

## `V4` props available in `V5`
Expand Down
3 changes: 2 additions & 1 deletion src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const Tooltip = ({
delayShow = 0,
delayHide = 0,
float = false,
hidden = false,
noArrow = false,
clickable = false,
closeOnEsc = false,
Expand Down Expand Up @@ -538,7 +539,7 @@ const Tooltip = ({
}
}, [id, anchorSelect])

const canShow = content && show && Object.keys(inlineStyles).length > 0
const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0

return rendered ? (
<WrapperElement
Expand Down
2 changes: 2 additions & 0 deletions src/components/Tooltip/TooltipTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export type DataAttribute =
| 'delay-show'
| 'delay-hide'
| 'float'
| 'hidden'

/**
* @description floating-ui middleware
Expand Down Expand Up @@ -62,6 +63,7 @@ export interface ITooltip {
delayShow?: number
delayHide?: number
float?: boolean
hidden?: boolean
noArrow?: boolean
clickable?: boolean
closeOnEsc?: boolean
Expand Down
6 changes: 6 additions & 0 deletions src/components/TooltipController/TooltipController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const TooltipController = ({
delayShow = 0,
delayHide = 0,
float = false,
hidden = false,
noArrow = false,
clickable = false,
closeOnEsc = false,
Expand All @@ -53,6 +54,7 @@ const TooltipController = ({
const [tooltipDelayShow, setTooltipDelayShow] = useState(delayShow)
const [tooltipDelayHide, setTooltipDelayHide] = useState(delayHide)
const [tooltipFloat, setTooltipFloat] = useState(float)
const [tooltipHidden, setTooltipHidden] = useState(hidden)
const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
const [tooltipEvents, setTooltipEvents] = useState(events)
const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
Expand Down Expand Up @@ -112,6 +114,9 @@ const TooltipController = ({
float: (value) => {
setTooltipFloat(value === null ? float : value === 'true')
},
hidden: (value) => {
setTooltipHidden(value === null ? hidden : value === 'true')
},
}
// reset unset data attributes to default values
// without this, data attributes from the last active anchor will still be used
Expand Down Expand Up @@ -239,6 +244,7 @@ const TooltipController = ({
delayShow: tooltipDelayShow,
delayHide: tooltipDelayHide,
float: tooltipFloat,
hidden: tooltipHidden,
noArrow,
clickable,
closeOnEsc,
Expand Down
2 changes: 2 additions & 0 deletions src/components/TooltipController/TooltipControllerTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export interface ITooltipController {
delayShow?: number
delayHide?: number
float?: boolean
hidden?: boolean
noArrow?: boolean
clickable?: boolean
closeOnEsc?: boolean
Expand Down Expand Up @@ -70,5 +71,6 @@ declare module 'react' {
'data-tooltip-delay-show'?: number
'data-tooltip-delay-hide'?: number
'data-tooltip-float'?: boolean
'data-tooltip-hidden'?: boolean
}
}