components#Tooltip TypeScript Examples

The following examples show how to use components#Tooltip. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: contributors.tsx    From geist-ui with MIT License 5 votes vote down vote up 
Contributors: React.FC<Props> = ({ path }) => {
  const { isChinese } = useConfigs()
  const [users, setUsers] = useState<Array<Contributor>>([])
  const link = useMemo(() => `${RepoMasterURL}/${path || '/pages'}`, [])

  useEffect(() => {
    let unmount = false
    ;(async () => {
      const contributors = await getContributors(path)
      if (unmount) return
      setUsers(contributors)
    })()
    return () => {
      unmount = true
    }
  }, [])

  return (
    <div className="contributors">
      {users.map((user, index) => (
        <Tooltip leaveDelay={0} text={<b>{user.name}</b>} key={`${user.url}-${index}`}>
          <Link color target="_blank" rel="nofollow" href={user.url}>
            <Avatar src={user.avatar} />
          </Link>
        </Tooltip>
      ))}
      <Tooltip
        leaveDelay={0}
        text={isChinese ? '在 GitHub 上编辑此页面' : 'Edit this page on GitHub'}
        type="dark">
        <Link color target="_blank" rel="nofollow" href={link}>
          <Avatar text="Add" />
        </Link>
      </Tooltip>
      <style jsx>{`
        .contributors {
          padding-left: 5px;
          padding-top: 5px;
          max-width: 100%;
          height: auto;
          display: flex;
          flex-wrap: wrap;
        }

        .contributors :global(.tooltip) {
          margin-right: 5px;
        }
      `}</style>
    </div>
  )
}
Example #2
Source File: index.test.tsx    From geist-ui with MIT License 4 votes vote down vote up 
describe('Tooltip', () => {
  it('should render correctly', async () => {
    const wrapper = mount(
      <GeistProvider themeType="dark">
        <Tooltip text={<p id="test">custom-content</p>}>some tips</Tooltip>
      </GeistProvider>,
    )

    expectTooltipIsHidden(wrapper)

    wrapper.find('.tooltip').simulate('mouseEnter', nativeEvent)
    await updateWrapper(wrapper, 150)
    wrapper.find('#test').simulate('click', nativeEvent)
    expectTooltipIsShow(wrapper)

    await updateWrapper(wrapper, 150)
    wrapper.find('.tooltip').simulate('mouseLeave', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectTooltipIsHidden(wrapper)
  })

  it('should render text when hover it', async () => {
    const wrapper = mount(
      <div>
        <Tooltip text="some text">some tips</Tooltip>
      </div>,
    )
    wrapper.find('.tooltip').simulate('mouseEnter', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectTooltipIsShow(wrapper)

    wrapper.find('.tooltip').simulate('mouseLeave', nativeEvent)
    await updateWrapper(wrapper, 350)
    expectTooltipIsHidden(wrapper)
  })

  it('should render react-node when click it', async () => {
    const wrapper = mount(
      <Tooltip text={<p id="test">custom-content</p>} trigger="click">
        <span>click me</span>
      </Tooltip>,
    )
    wrapper.find('.tooltip').simulate('click', nativeEvent)
    await updateWrapper(wrapper, 150)
    expectTooltipIsShow(wrapper)

    const testNode = wrapper.find('#test')
    expect(testNode.length).not.toBe(0)
    expect(testNode.text()).toContain('custom-content')
    act(() => {
      document.body.dispatchEvent(
        new MouseEvent('click', {
          view: window,
          bubbles: true,
          cancelable: true,
        }),
      )
    })

    await updateWrapper(wrapper, 150)
    expectTooltipIsHidden(wrapper)
  })

  it('should render inner components', async () => {
    const wrapper = mount(
      <Tooltip text="some text" type="dark">
        <Button auto id="test">
          button
        </Button>
      </Tooltip>,
    )
    expect(wrapper.find('#test').length).not.toBe(0)
  })

  it('should render correctly by visible', async () => {
    const wrapper = mount(
      <div>
        <Tooltip
          text={<p id="visible">custom-content</p>}
          visible={true}
          placement="rightEnd">
          some tips
        </Tooltip>
      </div>,
    )

    await updateWrapper(wrapper, 150)
    expect(wrapper.find('#visible').length).toBe(1)
  })

  it('should render correctly by using wrong placement', async () => {
    const wrapper = mount(
      <div>
        <Tooltip
          text={<p id="initial-visible">custom-content</p>}
          initialVisible={true}
          placement={'test' as any}>
          some tips
        </Tooltip>
      </div>,
    )
    expect(wrapper.find('#initial-visible').length).toBe(1)
  })
})