@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/tooltip": "x.y.z"

From outside the monorepo (build-time)

To install this package, you need to setup access to the artifactory. Click here to go to the guide on how to do that.

---

In MyApp.tsx

import "@purpurds/tokens/index.css";

and

import "@purpurds/tooltip/styles";

In MyComponent.tsx

Standard usage:

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

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

Setting negative variant with position and alignment:

import { Tooltip, TOOLTIP_VARIANT, TOOLTIP_POSITION, TOOLTIP_ALIGN } from "@purpurds/tooltip";

export const MyComponent = () => {
  return (
    <Tooltip
      triggerAriaLabel="extra information about something"
      variant={TOOLTIP_VARIANT.PRIMARY_NEGATIVE}
      position={TOOLTIP_POSITION.TOP}
      align={TOOLTIP_ALIGN.CENTER}
    >
      Some content
    </Tooltip>
  );
};

Using custom trigger element:

import { Tooltip } from "@purpurds/tooltip";
import { Button, BUTTON_VARIANT } from "@purpurds/button";
import { IconPetDog } from "@purpurds/icon";

export const MyComponent = () => {
  const customTooltipTrigger: ReactNode = (
    <Button variant={BUTTON_VARIANT.PRIMARY}>
      <IconPetDog size="md" />
      This is a custom trigger
    </Button>
  );

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

Using jsx in content:

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

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