@workday/canvas-kit-react-tooltip NPM

Canvas Kit Tooltip

A Tooltip component that renders information/text when the user hovers over an element.

Note: This Tooltip does not include a positioning engine. In our example we use Material UIs popper component to wrap our Tooltip component and position it, which is a wrapper to Popper.js. For reference: https://material-ui.com/api/popper/

Installation

yarn add @workday/canvas-kit-react

yarn add @workday/canvas-kit-react-tooltip

Usage

import * as React from 'react';
import Popper from '@material-ui/core/Popper';
import Tooltip from '@workday/canvas-kit-react-tooltip';

class TooltipExample extends React.Component<{}, TooltipExampleState> {
  private tooltipRef: React.RefObject<HTMLDivElement>;
  public constructor(props: {}) {
    super(props);
    this.tooltipRef = React.createRef();
    this.state = {
      open: false,
      anchorEl: null,
    };
  }

  public render() {
    const {open} = this.state;
    return (
      <div>
        <div
          style={{display: 'inline-flex'}}
          ref={this.tooltipRef}
          onMouseEnter={this.open}
          onMouseLeave={this.close}
          onFocus={this.open}
          onBlur={this.close}
          aria-labelledBy={'tooltip-id'}
          tabIndex={0}
        >
          Hover Over Me
        </div>
        <Popper open={open} anchorEl={this.state.anchorEl} placement={'bottom'}>
          <Tooltip id={'tooltip-id'}>Close</Tooltip>
        </Popper>
      </div>
    );
  }

  private close = () => {
    this.setState({
      open: false,
    });
  };

  private open = () => {
    this.setState({
      open: true,
      anchorEl: this.tooltipRef.current,
    });
  };
}

Static Properties

None

Component Props

Required

None

Optional

`transformOrigin: TransformOrigin`

Origin from which the popup will animate from

Default:

{
  horizontal: 'center',
  vertical: 'top',
}

`id: string`

Unique id of the tooltip

canvas canvas-kit react components workday tooltip

@emotion/core @emotion/styled @workday/canvas-kit-react-common @workday/canvas-kit-react-core @workday/canvas-kit-react-popup react-innertext uuid

@infinitebrahmanuniverse/nolb-_wor @everything-registry/sub-chunk-1021 @workday/canvas-kit-labs-react-breadcrumbs

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4.0.0-prerelease.f29f26b.3

4 years ago

4.0.0-beta.4

4 years ago

4.0.0-prerelease.25ebd14.2

4 years ago

4.0.0-prerelease.370c732.1

4 years ago

4.0.0-prerelease.9bee8d0.0

4 years ago

3.7.1-next.2

4 years ago

3.7.1-next.0

4 years ago

4.0.0-prerelease.2df320f.3

4 years ago

4.0.0-beta.3

4 years ago

4.0.0-prerelease.42c1aef.2

4 years ago

4.0.0-prerelease.bf33fae.0

4 years ago

4.0.0-prerelease.839d919.25

4 years ago

4.0.0-prerelease.0ec7791.1

4 years ago

4.0.0-beta.2

4 years ago

4.0.0-prerelease.0c47b9c.26

4 years ago

4.0.0-prerelease.22c6ff1.24

4 years ago

4.0.0-prerelease.9daf370.23

4 years ago

4.0.0-prerelease.e668828.22

4 years ago

3.6.1-next.14

4 years ago

4.0.0-prerelease.da2d967.21

4 years ago

4.0.0-prerelease.5f48600.20

4 years ago

3.7.0

4 years ago

4.0.0-prerelease.baf5748.18

4 years ago

4.0.0-prerelease.c1d3fa5.19

4 years ago

4.0.0-prerelease.ba8e51e.17

4 years ago

3.6.1-next.13

4 years ago

4.0.0-prerelease.f1e1a93.16

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago