feat(tooltip): add a tooltip component

Author: clementprevot

packages/fractal/src/components/Tooltip/Tooltip.constants.ts

@@ -0,0 +1 @@
+export const GROUP_NAME = 'tooltip'

packages/fractal/src/components/Tooltip/Tooltip.mdx

@@ -0,0 +1,37 @@
+import {
+  ArgTypes,
+  Controls,
+  Description,
+  Meta,
+  Primary,
+  Stories,
+  Subtitle,
+  Title,
+} from '@storybook/blocks'
+
+import * as TooltipStories from './Tooltip.stories'
+
+<Meta of={TooltipStories} />
+
+<Title />
+
+<Subtitle />
+
+<Description />
+
+---
+
+## Props
+
+On top of all the props, attributes and event handler you can set on a
+`<div />` element, component accepts the following props:
+
+<ArgTypes />
+
+<Stories includePrimary={false} title="Tooltips" />
+
+## Playground
+
+<Primary />
+
+<Controls />

packages/fractal/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { fn } from '@storybook/test'
+import { UilEllipsisV as MoreMenuIcon } from '@tooni/iconscout-unicons-react'
+
+import type { ComponentProps } from 'react'
+
+import { Button } from '@/components/Button'
+
+import { Tooltip } from '.'
+
+type TooltipProps = ComponentProps<typeof Tooltip>
+
+const meta = {
+  args: {
+    align: undefined,
+    children: 'Hover me',
+    content: 'This is a tooltip',
+    disabled: false,
+    side: undefined,
+    withArrow: true,
+    wrapInButton: false,
+  },
+  argTypes: {
+    content: { control: 'text' },
+    trigger: {
+      control: 'radio',
+      mapping: {
+        Button: <Button label="Hover me" />,
+        'Icon Button': (
+          <Button
+            icon={<MoreMenuIcon />}
+            iconOnly
+            label="Hover me"
+            variant="text"
+          />
+        ),
+        Text: 'Hover me',
+      },
+      options: ['Text', 'Button', 'Icon Button'],
+    },
+  },
+  component: Tooltip,
+  parameters: {
+    docs: {
+      subtitle: `🎩 A tip of the hat from Dr. Facilier. - Dr. Facilier - The Princess and the Frog`,
+    },
+  },
+
+  title: 'Molecules/Tooltip',
+} satisfies Meta<TooltipProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  args: {
+    onDisplayChange: fn(),
+    onHide: fn(),
+    onInteractOutside: fn(),
+    onShow: fn(),
+  },
+}

packages/fractal/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,78 @@
+import isNil from 'lodash/fp/isNil'
+import omit from 'lodash/fp/omit'
+
+import { cn } from '@/styles/helpers'
+
+import type { TooltipProps } from './Tooltip.types'
+
+import { Popover } from '../Popover'
+import { Typography } from '../Typography'
+
+/**
+ * `Tooltip` component allow to wrap anything that should display an small
+ * tooltip when hovered (or click).
+ */
+export const Tooltip = ({
+  align,
+  children,
+  content,
+  disabled = false,
+  onDisplayChange,
+  onHide,
+  onInteractOutside,
+  onShow,
+  show,
+  side,
+  toggleOnTriggerClick = false,
+  toggleOnTriggerHover = true,
+  tooltip = {},
+  withArrow = true,
+  wrapInButton = false,
+  ...props
+}: TooltipProps) => {
+  const hasTrigger = Boolean(children)
+  const hasContent = Boolean(content)
+
+  if (!hasTrigger || !hasContent) {
+    return false
+  }
+
+  return (
+    <Popover
+      align={align}
+      disabled={disabled}
+      elevation="1"
+      fullWidth={false}
+      modal={false}
+      open={!isNil(show) ? show : undefined}
+      popover={{
+        ...omit(['className'], tooltip),
+        className: cn(
+          'px-1 py-0 rounded-xs bg-dark text-light',
+          tooltip.className,
+        ),
+      }}
+      side={side}
+      toggleOnTriggerClick={toggleOnTriggerClick}
+      toggleOnTriggerHover={toggleOnTriggerHover}
+      trigger={children}
+      triggerAsButton={wrapInButton}
+      width="fit"
+      withArrow={withArrow}
+      withCloseButton={false}
+      withScroll={false}
+      onClose={onHide}
+      onInteractOutside={onInteractOutside}
+      onOpen={onShow}
+      onOpenChange={onDisplayChange}
+      {...props}
+    >
+      <Typography element="div" variant="caption-median">
+        {content}
+      </Typography>
+    </Popover>
+  )
+}
+Tooltip.displayName = 'Tooltip'
+
+export default Tooltip

packages/fractal/src/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,66 @@
+import type { AllHTMLAttributes, ReactNode } from 'react'
+
+import type { PopoverProps } from '../Popover'
+
+export interface TooltipProps
+  extends Omit<AllHTMLAttributes<HTMLDivElement>, 'content'> {
+  /**
+   * The trigger of the tooltip (i.e. the thing that should display the tooltip
+   * when hovered/clicked.
+   */
+  children: PopoverProps['trigger']
+  /** The content of the tooltip (i.e. the thing displayed in it). */
+  content: ReactNode
+  /** Indicates where to align the tooltip relative to the trigger. */
+  align?: PopoverProps['align']
+  /** Indicates if the tooltip is disabled (i.e. won't be displayed). */
+  disabled?: PopoverProps['disabled']
+  /**
+   * Indicates if the tooltip is shown.
+   *
+   * Can be used to force the display of the tooltip or when using a custom
+   * (non-text) trigger.
+   */
+  show?: PopoverProps['open']
+  /** The preferred side of the trigger to render the tooltip. */
+  side?: PopoverProps['side']
+  /**
+   * Indicates if you want to toggle the tooltip when clicking on the trigger
+   * (if provided of course).
+   */
+  toggleOnTriggerClick?: PopoverProps['toggleOnTriggerClick']
+  /**
+   * Indicates if you want to toggle the tooltip when hovering on the trigger
+   * (if provided of course).
+   *
+   * If you pass this to `false`, you will have to handle the opening/closing of
+   * the tooltip on your own or use `toggleOnTriggerClick`.
+   */
+  toggleOnTriggerHover?: PopoverProps['toggleOnTriggerHover']
+  /**
+   * Options to tweak the position of the tooltip.
+   * See https://www.radix-ui.com/primitives/docs/components/popover#content
+   *
+   * You can on top of that add the `className` and `style` properties to
+   * customize the style of the tooltip.
+   */
+  tooltip?: PopoverProps['popover']
+  /** The trigger of the tooltip. */
+  trigger?: PopoverProps['trigger']
+  /** Indicates if the tooltip should have an arrow indicator on the side. */
+  withArrow?: PopoverProps['withArrow']
+  /**
+   * Indicates if you want the trigger to be wrapped in a `button` element.
+   */
+  wrapInButton?: PopoverProps['triggerAsButton']
+  /** Event handler called when the tooltip is shown or hidden. */
+  onDisplayChange?: PopoverProps['onOpenChange']
+  /** Event handler called when the tooltip is hidden. */
+  onHide?: PopoverProps['onClose']
+  /**
+   * Event handler called when an interaction is made outside of the tooltip.
+   */
+  onInteractOutside?: PopoverProps['onInteractOutside']
+  /** Event handler called when the tooltip is shown. */
+  onShow?: PopoverProps['onOpen']
+}

packages/fractal/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip.js'
+export type { TooltipProps } from './Tooltip.types.js'