Artistic Tooltip

Installation

Copy and paste the following code into your project:

"use client";
 
import React, { useRef } from "react";
import { cn } from "@/lib/utils";
import { cva, type VariantProps } from "class-variance-authority";
 
const tooltipVariants = cva(
  "pointer-events-none fixed left-1/2 top-1/2 z-50 select-none px-3 py-1.5 text-sm font-medium",
  {
    variants: {
      style: {
        watercolor:
          "rounded-lg border border-white/20 bg-linear-to-br from-[#7FB3D5]/95 to-[#5499C7]/90 text-white shadow-md shadow-[#7FB3D5]/20 backdrop-blur-md [mask-image:paint(watercolor)]",
        oil: "rounded-lg border border-white/10 bg-linear-to-br from-[#2C3E50]/95 to-[#34495E]/90 text-white shadow-md shadow-[#2C3E50]/30 backdrop-blur-md [mask-image:paint(oil)]",
        pencil:
          "rounded-lg border border-white/10 bg-linear-to-br from-zinc-800/95 to-zinc-900/90 text-white/90 shadow-md shadow-zinc-900/30 backdrop-blur-md [mask-image:paint(pencil)]",
      },
    },
    defaultVariants: {
      style: "watercolor",
    },
  },
);
 
export type ArtisticTooltipProps = React.HTMLAttributes<HTMLDivElement> &
  VariantProps<typeof tooltipVariants> & {
    content: string;
    show?: boolean;
    children: React.ReactNode;
  };
 
export function ArtisticTooltip({
  className,
  style,
  content,
  show = false,
  children,
  ...props
}: ArtisticTooltipProps) {
  const triggerRef = useRef<HTMLDivElement>(null);
  const tooltipRef = useRef<HTMLDivElement>(null);
 
  const updateTooltipPosition = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!tooltipRef.current || !triggerRef.current) return;
 
    const trigger = triggerRef.current.getBoundingClientRect();
    const tooltip = tooltipRef.current;
    const mouseX = e.clientX - trigger.left;
    const mouseY = e.clientY - trigger.top;
 
    // Calculate position relative to mouse but with some offset
    const offsetX = 15;
    const offsetY = -30;
 
    tooltip.style.transform = `translate(${mouseX + offsetX}px, ${mouseY + offsetY}px)`;
  };
 
  return (
    <div
      ref={triggerRef}
      className="relative inline-flex"
      onMouseMove={show ? updateTooltipPosition : undefined}
    >
      {children}
      {show && (
        <div
          ref={tooltipRef}
          className={cn(
            tooltipVariants({ style }),
            "whitespace-pre-wrap break-words transition-opacity duration-150",
            show ? "opacity-100" : "opacity-0",
            className,
          )}
          {...props}
        >
          {content}
        </div>
      )}
    </div>
  );
}

Update the import paths to match your project setup:

import { ArtisticTooltip } from "@/components/ui/artistic-tooltip";

Usage

import { useState } from "react";
import { ArtisticTooltip } from "@/components/ui/artistic-tooltip";
 
export default function MyComponent() {
  const [showTooltip, setShowTooltip] = useState(false);
 
  return (
    <ArtisticTooltip
      content="Your tooltip message"
      show={showTooltip}
      style="watercolor"
    >
      <button
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
      >
        Hover me
      </button>
    </ArtisticTooltip>
  );
}

Props

Prop	Type	Default	Description
content	`string`	-	The content to display inside the tooltip
show	`boolean`	`false`	Controls the visibility of the tooltip
style	`"watercolor"` \| `"oil"` \| `"pencil"`	`"watercolor"`	The artistic style of the tooltip
className	`string`	-	Additional CSS classes to apply
children	`ReactNode`	-	The element that triggers the tooltip

Examples

Watercolor Style

<ArtisticTooltip
  content="Elegant watercolor effect"
  show={showTooltip}
  style="watercolor"
>
  <Button>Hover me</Button>
</ArtisticTooltip>

Oil Paint Style

<ArtisticTooltip
  content="Rich oil painting texture"
  show={showTooltip}
  style="oil"
>
  <Button>Hover me</Button>
</ArtisticTooltip>

Pencil Style

<ArtisticTooltip
  content="Minimalist pencil sketch"
  show={showTooltip}
  style="pencil"
>
  <Button>Hover me</Button>
</ArtisticTooltip>