@lightspeed/cirrus-tooltip

6.0.0-beta.1 • Public • Published

Tooltip

Tooltips are visual helpers when users hover or focus an element. They can also be activated without interaction to give extra information.

Note that tooltips won't be triggered on touch devices.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.

If using Yarn:

yarn add @lightspeed/cirrus-tooltip

Or using npm:

npm i -S @lightspeed/cirrus-tooltip

Usage

Import required styles in your .scss:

@import '@lightspeed/cirrus-tooltip/Tooltip.scss';

Content

The content inside of tooltips should NEVER be crucial information. As their discoverability isn’t that great and you don’t have hovers on touchscreen devices.

Directions

The tooltip comes in two styles with multiple directions. The direction indicates the position of the content (e.g. "top" means the content appears above the element)


React Component

Props

Prop Type Description
children React.ReactNode The content that will trigger the tooltip
content string The content to display within the tooltip
placement oneOf([top, top-start, top-end, bottom, bottom-start, bottom-end, left, right]) Tooltip placement, defaults to top
light boolean Displays tooltip on a light background
active boolean Forces tooltip to always display
tag string the tag that will be used by react-popper manager, default is a div

Example

import React from 'react';
import Tooltip from '@lightspeed/cirrus-tooltip';

const MyComponent = () => (
  <div>
    <Tooltip content="Tooltip">Trigger</Tooltip>
  </div>
);

export default MyComponent;

CSS Component

You can use CSS classes along with popper.js (the library used by the React component) to enable tooltips outside a React application. Here's the available classes:

Type Class
box .cr-tooltip
placement [data-placement="top"]
light .cr-tooltip--light
arrow .cr-tooltip__arrow

Readme

Keywords

none

Package Sidebar

Install

npm i @lightspeed/cirrus-tooltip

Weekly Downloads

15

Version

6.0.0-beta.1

License

MIT

Unpacked Size

58.7 kB

Total Files

13

Last publish

Collaborators

  • kurt.bergeron
  • lightspeedhq
  • ls-guillaume-lambert
  • ls-frederic-bouchard
  • anomen