Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
get acclimated and comfortable.
}
/>
<p>
Use <code>accent</code> appearance to gain user attention in cases such
onboarding, introducing functionality, asking for input, or prompting
action. A good rule of thumb is <code>accent</code> tooltips appear
automatically, while basic tooltips appear as a user clicks or hovers to
obtain more context.
</p>
{}}
>
We’ve added a new way keep track of your content. Bookmark this
course to view it later.
}
dont={
Bookmark this course
}
/>
)
{props.children}
<style>{`
.tooltipWrapper {
position: relative;
top: 12px;
left: -2px;
}
`}</style>
)
}
TooltipGuideline.propTypes = {
appearance: ReactPropTypes.oneOf(
Object.keys(Tooltip.appearances).map(a => Tooltip.appearances[a])
),
children: ReactPropTypes.string,
onClose: ReactPropTypes.func
}
function InAppExample() {
const [isHovered, setHovered] = React.useState(false)
const [isClicked, setClicked] = React.useState(false)
return (
<div>
<div>
<div>
</div></div></div>
<p>Install the component dependency:</p>
<code>
npm install @pluralsight/ps-design-system-tooltip
</code>
<p>Include a React component in your project:</p>
<code>
import Tooltip from '@pluralsight/ps-design-system-tooltip'
</code>
basic,
<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),