❤
npm
Sign UpSign In

This package has been deprecated

Author message:

Use evergreen-ui instead, see https://github.com/segmentio/evergreen/releases/tag/v1.0.0

evergreen-tooltip

2.19.6 • Public • Published

Tooltip

evergreen-tooltip is a package exporting a Tooltip React component. Tooltips display floating content in relation to a target. Tooltip appear either at the top, bottom of their target. The preferred and default side is the bottom.

Design example

tooltip

Implementation details

  • Uses Positioner from evergreen-positioner
  • Tooltips use onMouseLeave and onMouseEnter to show and hide the tooltip
  • Tooltips use a similar implementation to Popovers,

When creating a popover, you must specify both:

  • its content, by setting the content prop, and
  • its target, as a single child element or a function

Usage

<Tooltip content="My tooltip content. Lorem ipsum dolar set amet.">
  <Text display="inline-block" cursor="help">
    Hover to trigger
  </Text>
</Tooltip>

Prop types

static propTypes = {
  ...Positioner.propTypes,
  content: PropTypes.node,
  isShown: PropTypes.bool,
  children: PropTypes.node,
  tooltipProps: PropTypes.object,
  statelessProps: PropTypes.objectOf(TooltipStateless.propTypes),
}

Complete Story

import { storiesOf } from '@storybook/react'
import React from 'react'
import Box from 'ui-box'
import { Text } from 'evergreen-typography'
import { Tooltip } from '../src/'
 
storiesOf('tooltip', module).add('Tooltip', () => (
  <Box padding={40}>
    {(() => {
      document.body.style.margin = '0'
      document.body.style.height = '100vh'
    })()}
    <Tooltip content="My tooltip content. Lorem ipsum dolar set amet.">
      <Text display="inline-block" cursor="help">
        Hover to trigger
      </Text>
    </Tooltip>
    <Tooltip content="My tooltip content">
      <Text marginLeft={40} display="inline-block" cursor="help">
        Hover to trigger
      </Text>
    </Tooltip>
  </Box>
))

Readme

Keywords

Package Sidebar

Install

npm i evergreen-tooltip

Weekly Downloads

1

Version

2.19.6

License

MIT

Last publish

Collaborators

  • fouad
  • jeroenransijn
  • rowno
  • segment-admin
Try on RunKit
Report malware