How to use the @pluralsight/ps-design-system-tooltip.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 / site / pages / components / tooltip.js View on Github external
function TooltipGuideline(props) {
  return (
    
      <button>}
      /&gt;
      <div>
        
          {props.children}
        
      </div>
      <style>{`
        .tooltipWrapper {
          position: relative;
          top: 12px;
          left: -2px;
        }
      `}</style>
    
  )
}
TooltipGuideline.propTypes = {</button>
github pluralsight / design-system / packages / site / pages / components / tooltip.js View on Github external
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;
github pluralsight / design-system / packages / site / pages / components / position.js View on Github external
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>
github pluralsight / design-system / packages / site / pages / components / tooltip.js View on Github external
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.`
        ]}

@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