Have ideas to improve npm?Join in the discussion! »

    This package has been deprecated

    Author message:

    This package has been deprecated. Please find this package under its new name @cloudflare/component-tooltip.

    cf-component-tooltip

    5.0.0 • Public • Published

    cf-component-tooltip

    Cloudflare Tooltip Component

    Installation

    Installation with yarn is recommended

     
    $ yarn add cf-component-tooltip
     

    Usage

    import React from 'react';
    import { Tooltip } from 'cf-component-tooltip';
    import { Icon } from 'cf-component-icon';
    import { Button } from 'cf-component-button';
    import { Box } from 'cf-component-box';
     
    const Jsx = () => (
      <span>
        <h4>
          <Icon type="exclamation-sign" color="danger" label="tooltip" /> Sure. No
          problem!
        </h4>
        Important Info
      </span>
    );
     
    const TooltipComponent = () => (
      <div>
        <div>
          <h4>Standard tooltip with text</h4>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry.{' '}
          More Info{' '}
          <Box display="inline-block">
            <Tooltip
              place="top"
              message="It has survived not only five centuries, but also the leap into electronic
          typesetting, remaining essentially unchanged."
            >
              <Icon type="info-sign" color="primary" label="tooltip" />
            </Tooltip>
          </Box>
        </div>
     
        <h4>
          You can add a tooltip to any element you want. You can also use delayHide
          to delay the hiding of the tooltip
        </h4>
        <Box display="inline-block">
          <Tooltip delayHide={1000} place="top" message={"I'm on a button"}>
            <Button type="primary">Button Info</Button>
          </Tooltip>
        </Box>
        <h4>Can you do jsx?</h4>
        <Box display="inline-block">
          <Tooltip place="top" message={<Jsx />}>
            <span>Fancy Tooltip</span>
            <div />
          </Tooltip>
        </Box>
      </div>
    );
     
    export default TooltipComponent;
     

    Keywords

    none

    Install

    npm i cf-component-tooltip

    DownloadsWeekly Downloads

    4

    Version

    5.0.0

    License

    BSD-3-Clause

    Unpacked Size

    22 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar