@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>
);
};