How to use @pluralsight/ps-design-system-tooltip - 10 common examples

function TooltipGuideline(props) {
  return (
    
      <button>}
      /&gt;
      <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 =&gt; ()',
            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 =&gt; ()',
            null,
            null,
            'displays a close button, triggered on click'
          ])
        ]}
      /&gt;

function ReactExample() {
  const [isHovered, setHovered] = React.useState(false)
  return (
    <div>
      <div>
        
          <div>
            
                  Tooltip
                
              }
              when={isHovered}
            &gt;
              <button> setHovered(true)}
                onMouseOut={_ =&gt; setHovered(false)}
              &gt;
                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}`
        )}
      /&gt;

      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')}&gt;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>
       {}}
          &gt;
            We’ve added a new way keep track of your content. Bookmark this
            course to view it later.
          
        }
        dont={
          
            Bookmark this course
          
        }
      /&gt;
    
  
)

{props.children}
        
      
      <style>{`
        .tooltipWrapper {
          position: relative;
          top: 12px;
          left: -2px;
        }
      `}</style>
    
  )
}
TooltipGuideline.propTypes = {
  appearance: ReactPropTypes.oneOf(
    Object.keys(Tooltip.appearances).map(a =&gt; 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 =&gt; ()',
            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}
          &gt;
            <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(() => {