1.0.16 • Published 4 months ago
@zendeskgarden/container-tooltip v1.0.16
@zendeskgarden/container-tooltip
This package includes containers relating to tooltip in the Garden Design System.
Installation
npm install @zendeskgarden/container-tooltip
Usage
This container implements the tooltip design pattern and can be used to build a tooltip component. Check out storybook for live examples.
useTooltip
import { useTooltip } from '@zendeskgarden/container-tooltip';
const Tooltip = () => {
const { isVisible, getTooltipProps, getTriggerProps } = useTooltip({
isVisible: false,
delayMilliseconds: 500
});
const styles = {
visibility: isVisible ? 'visible' : 'hidden',
background: '#1f73b7',
padding: '10px',
margin: '6px 0',
color: '#fff'
};
return (
<>
<div {...getTooltipProps({ style: styles })}>Tooltip</div>
<button {...getTriggerProps()}>Trigger</button>
</>
);
};
TooltipContainer
import { TooltipContainer } from '@zendeskgarden/container-tooltip';
const Tooltip = () => {
return (
<TooltipContainer isVisible={false} delayMilliseconds={500}>
{({ isVisible, getTooltipProps, getTriggerProps }) => {
const styles = {
visibility: isVisible ? 'visible' : 'hidden',
background: '#1f73b7',
padding: '10px',
margin: '6px 0',
color: '#fff'
};
return (
<>
<div
{...getTooltipProps({
style: styles
})}
>
Tooltip
</div>
<button {...getTriggerProps()}>Trigger</button>
</>
);
}}
</TooltipContainer>
);
};
1.0.16
4 months ago
1.0.15
4 months ago
1.0.14
4 months ago
1.0.13
4 months ago
1.0.9
9 months ago
1.0.8
10 months ago
1.0.7
10 months ago
1.0.11
8 months ago
1.0.10
9 months ago
1.0.12
8 months ago
1.0.6
11 months ago
1.0.5
1 year ago
1.0.4
1 year ago
1.0.2
1 year ago
1.0.1
2 years ago
1.0.0
2 years ago
0.5.17
2 years ago
0.5.16
2 years ago
0.5.14
3 years ago
0.5.15
2 years ago
0.5.13
3 years ago
0.5.12
3 years ago
0.5.11
3 years ago
0.5.9
3 years ago
0.5.8
3 years ago
0.5.7
3 years ago
0.5.6
4 years ago
0.5.5
4 years ago
0.5.4
4 years ago
0.5.3
4 years ago
0.5.2
4 years ago
0.5.1
4 years ago
0.5.0
4 years ago
0.4.0
4 years ago
0.3.0
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.0
5 years ago