Custom Tooltip Component in Css and React Js

• Creating a custom tooltip component in React with pure CSS styling, including CSS variables for easy theme management, involves handling hover events and positioning the tooltip relative to its parent element. Let's get started.

Step 1: The Tooltip Component

• Here's a simple tooltip component that you can customize further as needed.

    import React, { useState, useRef } from 'react';

    import './Tooltip.css'; // Import the CSS file for styling

    const Tooltip = ({ children, text }) => {

        const [isVisible, setIsVisible] = useState(false);

        const tooltipRef = useRef();

        // Function to handle mouse hover

        const handleMouseOver = () => setIsVisible(true);

        const handleMouseOut = () => setIsVisible(false);

        return (

            <div className="tooltip-container" onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>

                {children}

                {isVisible && (

                    <div className="tooltip-box" ref={tooltipRef}>

                        {text}

                    </div>

                )}

            </div>

        );

    };

    export default Tooltip;

Step 2: The CSS Styling

• Save this as `Tooltip.css`. We'll use CSS variables for easy customization and add a simple fade-in animation for the tooltip appearance.

    :root {

        --tooltip-background-color: black;

        --tooltip-color: white;

        --tooltip-font-size: 14px;

        --tooltip-border-radius: 4px;

        --tooltip-padding: 8px;

        --tooltip-margin: 10px;

        --tooltip-transition: opacity 0.3s ease;

    }

    .tooltip-container {

        position: relative;

        display: inline-block;

    }

    .tooltip-box {

        position: absolute;

        bottom: 100%;

        left: 50%;

        transform: translateX(-50%);

        background-color: var(--tooltip-background-color);

        color: var(--tooltip-color);

        text-align: center;

        border-radius: var(--tooltip-border-radius);

        padding: var(--tooltip-padding);

        margin-bottom: var(--tooltip-margin);

        font-size: var(--tooltip-font-size);

        white-space: nowrap;

        opacity: 0;

        visibility: hidden;

        transition: var(--tooltip-transition);

    }

    .tooltip-container:hover .tooltip-box {

        opacity: 1;

        visibility: visible;

    }

Step 3: Usage Example

• To use the tooltip, wrap any element that you want to trigger the tooltip with the `Tooltip` component and pass the tooltip text via the `text` prop.

    import React from 'react';

    import Tooltip from './Tooltip'; // Import the Tooltip component

    const App = () => {

        return (

            <div className="App" style={{ marginTop: '20px', textAlign: 'center' }}>

                Hover over me:

                <Tooltip text="This is the tooltip content!">

                    <button>Hover Me</button>

                </Tooltip>

            </div>

        );

    };

    export default App;

• This setup provides a basic, customizable tooltip that can be enhanced with additional props for positioning, delays, or animations based on your needs. The tooltip appears above the child element and can be easily styled through the CSS variables.