Tooltip

Use the Custom Tooltip in your charts

Recharts

Installation

Copy-paste the component code in a file named Tooltip.tsx in your tailus-ui/visualizations folder.

import React from "react";
import { vTooltip as tooltip, type VTooltipProps as TooltipVariants } from "@tailus/themer";
import { twMerge } from "tailwind-merge";

type PayloadEntry = {
    name: string;
    value: number;
    color: string;
};

interface CustomTooltipProps extends React.HTMLAttributes<HTMLDivElement>, TooltipVariants {
    active: boolean;
    payload: PayloadEntry[];
    label: string;
}

const { root, title, separator, content, entry:entryTheme, entryValue, entryNameContainer, entryName, entryIndicator } = tooltip()

export const Custom: React.FC<CustomTooltipProps> = ({
    active,
    payload,
    label,
    mixed,
    fancy,
    className
}) => {

    if (mixed && fancy) {
        throw new Error("Tooltip cannot be both mixed and fancy");
    }
    
    if (active && payload && payload.length) {
        return (
            <div role="tooltip" className={root({fancy, mixed, className:twMerge("relative z-50", className)})}>
                <span className={title()}>{label}</span>
                <div role="separator" className={separator({fancy})} />

                <div className={content()}>
                    {payload.map((entry:PayloadEntry, index:number) => (
                        <div key={index} className={entryTheme()}>
                            <div className={entryNameContainer()}>
                                <div aria-hidden className={entryIndicator()} style={
                                    {
                                        "--entry-indicator-color": entry.color,
                                    } as React.CSSProperties
                                } />
                                <span className={entryName()}>{entry.name}</span>
                            </div>
                            <span className={entryValue()}>{entry.value}</span>
                        </div>
                    ))}
                </div>
            </div>
        );
    }

  return null;
};

export default Custom;

Usage

First, import the <Tooltip /> component from the recharts library and the <CustomTooltip /> component from your local files. Then, assign <CustomTooltip /> to the content prop of the <Tooltip /> component.

import { CustomTooltip } from "@tailus-ui/visualizations";
import { Tooltip } from "recharts"
import { ResponsiveContainer, AreaChart, Area } from 'recharts';
import { CartesianGrid } from "@tailus-ui/visualizations";

const data = [];

export const MyChart = () => {
    return (
        <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
            <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={data}>
                    
                    <Tooltip
                        cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }}
                        content={
                            <Custom payload={[]} active label={""}/>
                        }
                    />

                    <CartesianGrid />

                    /...your areas
                </AreaChart>
            </ResponsiveContainer>
        </div>
    )
}

Reference

The Custom Tooltip component has the following props

Prop
Type
Default
fancy
boolean
false
mixed
boolean
false
indicator
enum
circle

Examples

Mixed

 
import { ResponsiveContainer, AreaChart, Area, Tooltip, CartesianGrid } from 'recharts';
import { CustomTooltip, data } from "@tailus-ui/visualizations";

export const MyChart = () => {
    return (
        <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
            <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={data}>

                    <Tooltip
                        cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }}
                        content={
                            <CustomTooltip payload={[]} active mixed label={""}/>
                        }
                    />

                    // ...your Areas
                </AreaChart>
            </ResponsiveContainer>
        </div>
    )
}

Fancy

 
import { ResponsiveContainer, AreaChart, Area, Tooltip, CartesianGrid } from 'recharts';
import { cartesianGrid } from '@tailus/themer';
import { CustomTooltip, data } from "@tailus-ui/visualizations";

export const MyChart = () => {
    return (
        <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]">
            <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={data}>

                    <Tooltip
                        cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }}
                        content={
                            <CustomTooltip payload={[]} active fancy label={""}/>
                        }
                    />

                    // ...your Areas
                </AreaChart>
            </ResponsiveContainer>
        </div>
    )
}

Mixed Glassy

 
import { ResponsiveContainer, AreaChart, Area, Tooltip, CartesianGrid } from 'recharts';
import { CustomTooltip, data } from "@tailus-ui/visualizations";

export const MyChart = () => {
    return (
        <div className="h-56 sm:h-72 w-full sm:max-w-2xl sm:min-w-[36rem]" data-shade="glassy">
            <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={data}>

                    <Tooltip
                        cursor={{ stroke: 'var(--ui-border-color)', strokeWidth: 1 }}
                        content={
                            <CustomTooltip payload={[]} active mixed label={""}/>
                        }
                    />
                    
                    // ...your Areas
                </AreaChart>
            </ResponsiveContainer>
        </div>
    )
}