Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
function TooltipGuideline(props) {
return (
<button>}
/>
<div>
{props.children}
</div>
<style>{`
.tooltipWrapper {
position: relative;
top: 12px;
left: -2px;
}
`}</style>
)
}
TooltipGuideline.propTypes = {</button>
null,
<code>basic</code>,
<span>
visual style (from <code>Tooltip.appearances</code>)
</span>
]),
PropTypes.row([
'innerRef',
'DOM element => ()',
null,
null,
'react ref callback'
]),
PropTypes.row([
'tailPosition',
PropTypes.union(Tooltip.tailPositions),
null,
null,
<span>
positions a tail pointer (from <code>Tooltip.tailPositions</code>)
</span>
]),
PropTypes.row([
'onClose',
'Event => ()',
null,
null,
'displays a close button, triggered on click'
])
]}
/>
function ReactExample() {
const [isHovered, setHovered] = React.useState(false)
return (
<div>
<div>
<div>
Tooltip
}
when={isHovered}
>
<button> setHovered(true)}
onMouseOut={_ => setHovered(false)}
>
Hover me
</button>
</div>
</div></div>
Tail
<p>
Tooltips can be shown with or without a tail (a directional indicator).
To make the tail appear, use a <code>Tooltip.tailPositions</code>{' '}
option.
</p>
`${tailPosition}`
)}
/>
Close button
<p>
Tooltips may be persistent until a user interaction closes them. For a
close button in the top-right corner of the tooltip, provide a{' '}
<code>onClose</code> callback.
</p>
alert('close clicked')}>With a close button for those cases you want the tooltip to persist until closed.`
]}