How to use the @pluralsight/ps-design-system-tooltip.appearances 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 / site / pages / components / tooltip.js View on Github external
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;
    
  
)
github pluralsight / design-system / packages / site / pages / components / tooltip.js View on Github external
{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>
github pluralsight / design-system / packages / site / pages / components / tooltip.js View on Github external
<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),

@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