How to make custom tooltip for your React Project

Creating custom components for projects are always the biggest problem for new developer. In this article we will gonna learn how to create a custom tooltip component for your React Project.

Requirement

We have to create a custom tooltip component which will gonna show some text on hover on a element. For this we will gonna need a parent container which will gonna have a position relative and a child element which will gonna have position absolute.

Solution

To create custom tooltip we will gonna use styled component even though we can do this without using any extra library.

Our render method will gonna have a container, children and a tooltip text.

export const Tooltip = ({children, tip}) => {
    return <TooltipContainer>
        {children}
        <span className="tip">{tip}</span>
    </TooltipContainer>
};

By using the styled component we will gonna add position relative to TooltipContainer and position absolute to child span.

const TooltipContainer = styled.span`
    position: relative;

    &:hover > .tip {
        display: block;
    }

    & > .tip {
        display: none;
        position: absolute;

        background: #1F2531;
        opacity: 0.9;
        border-radius: 5px;

        color: #FFFFFF;
        padding: 12px 8px;
        width: 100%;
        min-width: 100px;
    }

    & > .tip::after {
        content: "";
        position: absolute;
        opacity: 0.9;
        top: -10px;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color:  transparent transparent black transparent;
    }
`;

In the end our full component will gonna look like this.

import React from "react";
import styled from "styled-components";

const TooltipContainer = styled.span`
    position: relative;

    &:hover > .tip {
        display: block;
    }

    & > .tip {
        display: none;
        position: absolute;

        background: #1F2531;
        opacity: 0.9;
        border-radius: 5px;

        color: #FFFFFF;
        padding: 12px 8px;
        width: 100%;
        min-width: 100px;
    }

    & > .tip::after {
        content: "";
        position: absolute;
        opacity: 0.9;
        top: -10px;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color:  transparent transparent black transparent;
    }
`;

export const Tooltip = ({children, tip}) => {
    return <TooltipContainer>
        {children}
        <span className="tip">{tip}</span>
    </TooltipContainer>
};

To use this custom tooltip component we will simply gonna import it and then use it.

Usage

import React from "react";

import { Tooltip } from "./tooltip";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Tooltip tip="custom tooltip">
        <p>A random long text...</p>
      </Tooltip>
    </div>
  );
}

We will gonna see output similar to this.

How to make custom tooltip for your React Project
Edit fi7ts

I hope you have learned how to create custom tooltip for your React Project. Feel free to comment your views. 🙂

Best svg resources for React Projects

Categories: Reactjs