README

Canvas Kit Tooltip

Tooltips with modifiers and containers implementing display on hover.

Installation

yarn add @workday/canvas-kit-css

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

Add your node_modules directory to your SASS includePaths. You will then be able to import index.scss.

@import '~@workday/canvas-kit-css-tooltip/index.scss';

Usage

Tooltips are used to display brief items of information.

Text does not wrap in tooltips.

Use .wdc-tooltip to create a tooltip. This can be used in conjunction with any directional modifiers.

<div class="wdc-tooltip wdc-tooltip-right">
  Right tooltip
</div>

Directional Modifiers

Four directions are available. Each direction will change the orientation of the popup arrow. Use directional classes in addition to .wdc-tooltip.

.wdc-tooltip-right
.wdc-tooltip-left
.wdc-tooltip-top
.wdc-tooltip-bottom

<div class="wdc-tooltip wdc-tooltip-right">
  Right popup
</div>

<div class="wdc-tooltip wdc-tooltip-left">
  Left popup
</div>

<div class="wdc-tooltip wdc-tooltip-top">
  Top popup
</div>

<div class="wdc-tooltip wdc-tooltip-bottom">
  Bottom popup
</div>

Display on hover

To display a popup on hover, wrap hoverable content within a .wdc-tooltip-container. Insert a .wdc-tooltip within the container. The popup will automatically be positioned according to its directional modifier.

A directional modifier is required for proper usage.

<div class="wdc-tooltip-container">
  Right popup
  <div class="wdc-tooltip wdc-tooltip-right">
    Tooltip
  </div>
</div>

<div class="wdc-tooltip-container">
  Right tooltip
  <div class="wdc-tooltip wdc-tooltip-right">
    Tooltip text
  </div>
</div>

Accessibility Note

Use aria-describedby={id} on the element your tooltip is connected to.
Make sure you show the tooltip when the element you're describing (e.g. an Icon Button) is focused as well. This is only possible with Javascript.

Usage no npm install needed!