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.`
]}
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),
function JsStory({ positionType, ...rest }) {
const TAIL_POSITION_MAP = {
above: Tooltip.tailPositions.bottomCenter,
aboveLeft: Tooltip.tailPositions.bottomLeft,
aboveRight: Tooltip.tailPositions.bottomRight,
rightOf: null,
below: Tooltip.tailPositions.topCenter,
belowLeft: Tooltip.tailPositions.topLeft,
belowRight: Tooltip.tailPositions.topRight,
leftOf: null
}
const tailPosition = TAIL_POSITION_MAP[positionType]
const boxRef = React.useRef()
const tooltipRef = React.useRef()
const [styles, setStyles] = React.useState({ position: 'absolute' })
React.useEffect(() => {
const { current: box } = boxRef
const { current: tooltip } = tooltipRef
if (!box || !tooltip) return
export default function PortalExample() {
const portal = React.useRef()
const [node, setNode] = React.useState(portal.current)
React.useEffect(() => {
if (portal.current) setNode(portal.current)
}, [portal])
return (
<div>
<div>
<div>
Rendered through a Portal
}
inNode={node}
>
<button style="{{">
Button
</button>
This is an area that needs escaped
</div>
<div></div></div></div>
function JsStory({ positionType, ...rest }) {
const TAIL_POSITION_MAP = {
above: Tooltip.tailPositions.bottomCenter,
aboveLeft: Tooltip.tailPositions.bottomLeft,
aboveRight: Tooltip.tailPositions.bottomRight,
rightOf: null,
below: Tooltip.tailPositions.topCenter,
belowLeft: Tooltip.tailPositions.topLeft,
belowRight: Tooltip.tailPositions.topRight,
leftOf: null
}
const tailPosition = TAIL_POSITION_MAP[positionType]
const boxRef = React.useRef()
const tooltipRef = React.useRef()
const [styles, setStyles] = React.useState({ position: 'absolute' })
React.useEffect(() => {