@cloudflare/component-tooltip

4.5.1 • Public • Published

@cloudflare/component-tooltip

Cloudflare Tooltip Component

Installation

Installation with yarn is recommended

$ yarn add @cloudflare/component-tooltip

Usage

import React from 'react';
import { Tooltip } from '../../src';
import { Icon } from '@cloudflare/component-icon';
import { Button } from '@cloudflare/component-button';
import { Box } from '@cloudflare/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;

Readme

Keywords

none

Package Sidebar

Install

npm i @cloudflare/component-tooltip

Weekly Downloads

5,837

Version

4.5.1

License

BSD-3-Clause

Unpacked Size

155 kB

Total Files

8

Last publish

Collaborators

  • cf-media-manager
  • jacobbednarz
  • celso
  • cf-radar
  • dash_service_account
  • g4brym
  • snigdha34
  • wrangler-publisher
  • marksteyn
  • chiminator
  • sgoodhew_cf
  • terinjokes
  • third774
  • jsteinberger
  • jasnell
  • asapzacy
  • pcostanzo
  • gregbrimble
  • geelen
  • rexscaria
  • dcruz_cf
  • xuranwang
  • jculvey
  • sejoker
  • vasturiano
  • cf-ci-write
  • segments-write
  • thibmeu
  • xortive
  • gurjinder
  • cf-ci2
  • lvalenta
  • worenga