Nondigestible Purple Mayonnaise

    @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

    Keywords

    none

    Install

    npm i @lightspeed/cirrus-tooltip

    DownloadsWeekly Downloads

    20

    Version

    6.0.0-beta.1

    License

    MIT

    Unpacked Size

    58.7 kB

    Total Files

    13

    Last publish

    Collaborators

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