Tooltip

Overview

The Tooltip component provides a simple and customizable way to display helpful tooltips when users hover over certain elements on a webpage. These tooltips can contain informative text, providing additional context or explanations for UI elements. The Tooltip component is designed to be flexible, allowing developers to specify various properties such as the tooltip's width, offset, animation direction, and animation duration. With its intuitive API and straightforward usage, the Tooltip component enhances user experience by making interactions more informative and intuitive.

Demo

Link

Text

Easy CLI Install

jrui add tooltip reveal

Props

The `Tooltip` component accepts the following props for controlling its animation behavior:

tip: (string)
The text content of the tooltip, providing information or context to the user when they hover over the target element.
width?: ("max-content" | number)
The width of the tooltip. It can be set to "max-content" to adjust the width automatically based on the content, or it can be set to a specific number to define a fixed width in rem.
offset?: ("50%" | number)
The offset of the tooltip from the target element. It is set by default to "50%" to center the tooltip horizontally, or it can be set to a specific number to define the offset in rem.
animationDirection?: ("up" | "down" | "left" | "right")
The direction of the animation when the tooltip appears. It determines the direction from which the tooltip animates into view.
delayIn?: (number)
The delay before the tooltip appears when the user hovers over the target element, specified in milliseconds.
delayOut?: (number)
The delay before the tooltip disappears when the user moves the cursor away from the target element, specified in milliseconds.
animationDuration?: (number)
The duration of the animation when the tooltip appears or disappears, specified in seconds.
className?: (string)
Additional CSS classes to apply to the tooltip for custom styling.
children: (ReactNode)
The content that triggers the display of the tooltip when hovered over by the user. This can be any valid React node or component.

Props Demo

Component Files

components > Tooltip.tsx


"use client";
import React, { ReactNode, useState } from "react";
import Reveal from "./Reveal";

interface TooltipProps {
  tip: string;
  width?: "max-content" | number;
  offset?: "50%" | number;
  animationDirection?: "up" | "down" | "left" | "right";
  delayIn?: number;
  delayOut?: number;
  animationDuration?: number;
  className?: string;
  children: ReactNode;
}

const Tooltip: React.FC<TooltipProps> = ({
  tip,
  className,
  width = "max-content",
  offset = "50%",
  animationDirection = "up",
  animationDuration = 0.2,
  delayIn = 200,
  delayOut = 200,
  children,
}) => {
  const [isHovered, setHovered] = useState(false);

  return (
    <Reveal
      className="relative z-[999] inline-block"
      onMouseEnter={() => setTimeout(() => setHovered(true), delayIn)}
      onMouseLeave={() => setTimeout(() => setHovered(false), delayOut)}
    >
      {children}
      {isHovered && (
        <Reveal direction={animationDirection} duration={animationDuration}>
          <Reveal
            className={` ${className} mt-1 absolute top-full transform -translate-x-1/2 bg-white dark:bg-[#020817] border border-gradient z-[999] left-[50%]`}
            style={{ width: width + "rem", left: `calc(50% + ${offset}rem)` }}
          >
            <p className="p-1 text-[14px] text-center m-0">{tip}</p>
          </Reveal>
        </Reveal>
      )}
    </Reveal>
  );
};

export default Tooltip;

components > Reveal.tsx

"use client";
import React, { FC, ReactNode, useEffect } from "react";
import { motion, useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";

interface RevealProps {
  direction?: "up" | "down" | "left" | "right";
  delay?: number;
  duration?: number;
  children: ReactNode;
  className?: string;
}

const Reveal: FC<RevealProps> = ({
  direction = "up",
  delay = 0.2,
  duration = 0.5,
  children,
  className,
}) => {
  const controls = useAnimation();
  const [ref, inView] = useInView({
    triggerOnce: true,
  });

  useEffect(() => {
    if (inView) {
      controls.start({
        opacity: 1,
        y: 0,
        x: 0,
        transition: { duration: duration, delay },
      });
    }
  }, [controls, inView, delay]);

  // Set initial styles before the animation
  const initialStyles = {
    opacity: 0,
    y: direction === "up" ? 20 : direction === "down" ? -20 : 0,
    x: direction === "left" ? 20 : direction === "right" ? -20 : 0,
  };

  return (
    <motion.Reveal
      className={className}
      ref={ref}
      initial={initialStyles}
      animate={controls}
    >
      {children}
    </motion.Reveal>
  );
};

export default Reveal;

Example Use Case

Example.tsx

import React from "react";
import Tooltip from "@/components/Tooltip"; // Adjust the import path based on your project structure

const Example: React.FC = () => {
  return (
    <Reveal className="center h-[80dvh]">
      <Tooltip
        tip="This is a tooltip"
        width={8}
        offset={7}
        animationDirection="up"
        animationDuration={0.5}
        delayIn={200}
        delayOut={200}
        className=" border-4 border-white"
      />
    </Reveal>
  );
};

export default Example;

Prev: Next:

JRui

Getting Started

Templates

Features

Sections

Components