glide-design-system/src/stories/tooltip/Tooltip.stories.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import { Tooltip } from "../../lib";

export default {
  title: "Components/Tooltip",
  component: Tooltip,
  tags: ["autodocs"],
  argTypes: {
    title: {
      control: "text",
      description: "Text to display as the tooltip title.",
    },
    children: {
      control: "text",
      description: "Content to display within the tooltip.",
    },
    style: {
      control: "object",
      description:
        "Additional CSS styles to apply to the tooltip component for custom styling.",
    },
    className: {
      control: "",
      description:
        "Additional CSS class name to apply to the tooltip component for custom styling",
    },
  },
  parameters: {
    docs: {
      description: {
        component:
          "The Tooltip component provides a tooltip interface that appears when hovering over its children. It accepts props such as title, children for content, style for customizing appearance, and className for additional styling classes.",
      },
    },
  },
};

const Template = (args) => <Tooltip {...args} />;

export const Default = Template.bind({});
Default.args = {
  title: "Hover here",
  children: <p>Content displayed when hovering over the tooltip title.</p>,
};

Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the tooltip with a hoverable title.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  title: "Tooltip with Custom Style",
  children: (
    <p>
      Content displayed with custom styling when hovering over the tooltip
      title.
    </p>
  ),
  style: {
    backgroundColor: "#f0f0f0",
    color: "black",
    border: "1px solid #ccc",
  },
};

CustomStyle.parameters = {
  docs: {
    description: {
      story: "This example shows how to use tooltip with custom style.",
    },
  },
};

export const CustomContent = Template.bind({});
CustomContent.args = {
  title: "Custom Title and Content",
  children: (
    <div>
      <strong>Custom Content</strong> displayed when hovering over the tooltip
      title.
    </div>
  ),
};

CustomContent.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use tooltip with custom title and content.",
    },
  },
};

export const HoverInteraction = Template.bind({});
HoverInteraction.args = {
  title: "Tooltip on Hover",
  children: "Hover over me",
};

HoverInteraction.parameters = {
  docs: {
    description: {
      story: "Displays a tooltip that appears on hover.",
    },
  },
};