@purpurds/tooltip

import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";

import * as TooltipStories from "./src/tooltip.stories"; import packageInfo from "./package.json";

Tooltip

Version {packageInfo.version}

Showcase

Properties

Installation

Via NPM

Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"

In MyApp.tsx

import "@purpurds/purpur/styles";

In MyComponent.tsx

Standard usage:

import { Tooltip } from "@purpurds/purpur";

export const MyComponent = () => {
  return <Tooltip triggerAriaLabel="extra information about something">Some content</Tooltip>;
};

Setting negative variant with position and alignment:

import { Tooltip } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <Tooltip
      triggerAriaLabel="extra information about something"
      variant="primary-negative"
      position="top"
      align="center"
    >
      Some content
    </Tooltip>
  );
};

Using custom trigger element:

import { Button, IconPetDog, Tooltip } from "@purpurds/purpur";

export const MyComponent = () => {
  const customTooltipTrigger: ReactNode = (
    <Button variant="primary">
      <IconPetDog />
      This is a custom trigger
    </Button>
  );

  return <Tooltip triggerElement={customTooltipTrigger}>Some content</Tooltip>;
};

Using jsx in content:

import { Tooltip } from "@purpurds/purpur";

export const MyComponent = () => {
  return (
    <Tooltip triggerAriaLabel="extra information about something">
      <div>Hello world! This is the content</div>
    </Tooltip>
  );
};