Socket
Socket
Sign inDemoInstall

@workday/canvas-kit-react-tooltip

Package Overview
Dependencies
8
Maintainers
6
Versions
297
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@workday/canvas-kit-react-tooltip

A Tooltip component that renders information/text when the user hovers over an element. A tooltip is used to label or describe an element. By default, a tooltip will label an element. This is useful for IconButtons. A tooltip can also be used to describe


Version published
Weekly downloads
4K
decreased by-2.86%
Maintainers
6
Created
Weekly downloads
 

Readme

Source

Canvas Kit Tooltip

A Tooltip component that renders information/text when the user hovers over an element. A tooltip is used to label or describe an element. By default, a tooltip will label an element. This is useful for IconButtons. A tooltip can also be used to describe additional information about an element

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-react

or

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

Usage

import * as React from 'react';

import {Tooltip} from '@workday/canvas-kit-react-tooltip';
import {IconButton} from '@workday/canvas-kit-react-button';

const TooltipExample = () => {
  return (
    <Tooltip title="Close">
      <IconButton variant={IconButton.Variant.Circle} icon={xIcon} aria-label="Close" />
    </Tooltip>
  );
};

Static Properties

None

Component Props

Required

title: string | React.ReactNode

This should be a string in most cases. HTML is supported, but only text is understood by assistive technology. This is true for both label and describe modes.

children: React.ReactNode

The target (anchor element) for the Tooltip.

Note: This must be an Element, StyledComponent or any other component that forwards extra props to an Element. Tooltip works running React.cloneElement on the children and adds extra properties like aria attributes and event handlers. This is currently a limitation of the Tooltip component. Functionality will not work if this condition isn't met


Optional

type: 'label' | 'describe'

Determines the tooltip type for accessibility.

  • label: Sets the accessible name for the wrapped element. Use for icons or if tooltip title prop is the same as the text content of the wrapped element. E.g. IconButtons or Ellipsis tooltips.
  • describe: Sets aria-describedby of the wrapped element. Use if the tooltip has additional information about the target. Note: Assistive technology may ignore describe techniques based on verbosity settings. Consider an alternate way to inform a user of additional important information.

Default: 'label'

placement: PopperJS.Placement

Sets the placement preference used by PopperJS.

Default: 'top'

Keywords

FAQs

Last updated on 09 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc