How to use the @pluralsight/ps-design-system-tooltip/react.js.tailPositions function in @pluralsight/ps-design-system-tooltip

To help you get started, we’ve selected a few @pluralsight/ps-design-system-tooltip examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pluralsight / design-system / packages / position / src / react / __stories__ / index.story.js View on Github external
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
github pluralsight / design-system / packages / site / pages / components / position-portal-example.js View on Github external
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>
github pluralsight / design-system / packages / position / src / react / __stories__ / index.story.js View on Github external
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(() => {

@pluralsight/ps-design-system-tooltip

Design System component for tooltip ui

Apache-2.0
Latest version published 2 years ago

Package Health Score

54 / 100
Full package analysis

Similar packages