Mcoli UI - MC Tooltip

Overview

The mc-tooltip is a core component of the MicroClub UI library. Built on the @base-ui/react tooltip primitive, it combines world-class accessibility with MicroClub's signature styling via Tailwind CSS v4.

As a part of the MicroClub library, this component is designed for instant deployment into your codebase, giving you full ownership of its look and behavior.

Preview

import { Button } from '@/components/ui/button';import { McTooltip, McTooltipContent, McTooltipTrigger } from '../ui/mc-tooltip';export default function McTooltipDemo() {  return (    <McTooltip>      <McTooltipTrigger render={<Button variant="outline">Hover</Button>} />      <McTooltipContent        title="Lovely tooltip title"        desc="There are a lot of things you can do in space."      />    </McTooltip>  );}

Add to Your Project

Deploy the mc-tooltip directly to your components/ui directory:

npx mcoli-ui@latest add mc-tooltip

pnpm dlx mcoli-ui@latest add mc-tooltip

yarn dlx mcoli-ui@latest add mc-tooltip

bunx mcoli-ui@latest add mc-tooltip

Manual Setup

If you prefer manual control:

Install the core dependencies

npm install @base-ui/react

pnpm add @base-ui/react

yarn add @base-ui/react

bun add @base-ui/react

Copy the source code

'use client';import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';import { cn } from '@/lib/utils';function McTooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;}function McTooltip({ ...props }: TooltipPrimitive.Root.Props) {  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;}function McTooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;}function McTooltipContent({  className,  side = 'top',  sideOffset = 4,  align = 'center',  alignOffset = 0,  children,  title,  desc,  ...props}: TooltipPrimitive.Popup.Props &  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {    desc?: string;    ttitle?: string;  }) {  return (    <TooltipPrimitive.Portal>      <TooltipPrimitive.Positioner        align={align}        alignOffset={alignOffset}        side={side}        sideOffset={sideOffset}        className="isolate z-50"      >        <TooltipPrimitive.Popup          data-slot="tooltip-content"          className={cn(            'z-50 inline-flex h-fit max-w-58  origin-(--transform-origin) items-center  rounded-sm bg-card-background  gap-2 shadow-[0px_1px_4px_0px_#E6E9FF] data-[side=bottom]:mt-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:mr-1.5 data-[side=left]:slide-in-from-right-2 data-[side=right]:ml-1.5 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:mb-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',            className          )}          {...props}        >          <div className=" flex flex-col gap-2 p-4 text-wrap">            {title && <p className=" text-foreground text-xs/semi-bold] text-wrap">{title}</p>}            {desc && (              <p className="text-muted-foreground  font-dm-sans font-normal text-[12px] leading-4.5 tracking-[0] align-middle wrap-anywhere">                {desc}              </p>            )}          </div>          {children}          <TooltipPrimitive.Arrow className="z-50 size-4  translate-y-[calc(-50%-2px)]   rounded-xs bg-card-background   data-[side=bottom]:top-0.5  data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:rotate-90 data-[side=left]:top-1.5 data-[side=left]:-right-1.5 data-[side=left]:-translate-y-1/2 data-[side=right]:-rotate-90 data-[side=right]:top-1/2 data-[side=right]:-left-[6.80px] data-[side=right]:-translate-y-1/2 data-[side=top]:rotate-180 data-[side=top]:-bottom-4">            <svg width="21" height="18" viewBox="0 0 12 6" className="  fill-background">              <path d="M0 6L6 0L12 6H0Z" />            </svg>          </TooltipPrimitive.Arrow>        </TooltipPrimitive.Popup>      </TooltipPrimitive.Positioner>    </TooltipPrimitive.Portal>  );}export { McTooltip, McTooltipTrigger, McTooltipContent, McTooltipProvider };

Adjust import paths

Ensure your @/lib/utils or equivalent classname helper is correctly imported.

Usage

import {
  McTooltip,
  McTooltipTrigger,
  McTooltipContent,
  McTooltipProvider,
} from '@/components/ui/mc-tooltip';

export default function Example() {
  return (
    <McTooltipProvider>
      <McTooltip>
        <McTooltipTrigger>
          <button>Hover me</button>
        </McTooltipTrigger>
        <McTooltipContent title="McTooltip Title" desc="This is a description." />
      </McTooltip>
    </McTooltipProvider>
  );
}

Examples

Basic McTooltip

<McTooltipProvider>
  <McTooltip>
    <McTooltipTrigger>
      <button className="px-4 py-2 bg-blue-500 text-white rounded">Hover me</button>
    </McTooltipTrigger>
    <McTooltipContent title="Hello" desc="This is a basic tooltip." />
  </McTooltip>
</McTooltipProvider>

Positioning

<McTooltipProvider>
  <McTooltip>
    <McTooltipTrigger>
      <button className="px-4 py-2 bg-green-500 text-white rounded">Top</button>
    </McTooltipTrigger>
    <McTooltipContent side="top" title="Top McTooltip" />
  </McTooltip>
  <McTooltip>
    <McTooltipTrigger>
      <button className="px-4 py-2 bg-red-500 text-white rounded">Bottom</button>
    </McTooltipTrigger>
    <McTooltipContent side="bottom" title="Bottom McTooltip" />
  </McTooltip>
</McTooltipProvider>

With Custom Content

<McTooltipProvider>
  <McTooltip>
    <McTooltipTrigger>
      <button className="px-4 py-2 bg-purple-500 text-white rounded">Custom</button>
    </McTooltipTrigger>
    <McTooltipContent>
      <div className="text-center">
        <p className="font-semibold">Custom Content</p>
        <p>You can put anything here!</p>
      </div>
    </McTooltipContent>
  </McTooltip>
</McTooltipProvider>

API Reference

McTooltipProvider Props

Prop	Type	Default	Description
`delay`	`number`	`0`	Delay in ms before showing tooltip

All other props from @base-ui/react/tooltip/provider are supported.

McTooltip Props

All props from @base-ui/react/tooltip/root are supported.

McTooltipTrigger Props

All props from @base-ui/react/tooltip/trigger are supported.

McTooltipContent Props

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	The side of the trigger to position the tooltip
`sideOffset`	`number`	`4`	The offset from the trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	The alignment of the tooltip
`alignOffset`	`number`	`0`	The offset for alignment
`title`	`string`	`undefined`	The title text of the tooltip
`desc`	`string`	`undefined`	The description text of the tooltip
`children`	`ReactNode`	`undefined`	Custom content for the tooltip

All other props from @base-ui/react/tooltip/popup and @base-ui/react/tooltip/positioner are supported.

MC Tooltip

On this page