Create your own Tooltip Component using React Styled Component in Javascript.

Overview

Tooltips are small, interactive, textual hints for mainly graphical elements. They are used to provide additional information to users when they hover over an element. Tooltips enhance the user experience and make it easier for users to understand the purpose of an element.

React Styled Components is a popular library for styling React components. It allows you to write CSS styles in your JavaScript code, which makes it easy to create dynamic and reusable styles.

In this article, we will create a simple tooltip component using React Styled Components.

Steps

1. Create a new React project

To create a new React project, you can use the following command:

npx create-react-app my-app

2. Install React Styled Components

To install React Styled Components, run the following command in your terminal:

npm install styled-components

3. Create a Tooltip component

In your App.js file, import the styled-components library and create a new Tooltip component:

import React from "react";

const Tooltip = React.forwardRef((props, ref) => {
    const {
        className = "",
        children,
        style,
        visible,
        arrow = true,
        ...rest
    } = props;

    const opacity = visible ? 1 : undefined;
    const classes = `tooltip ${className} ${arrow ? "tooltip-arrow" : ""}`;

    return (
        <div
            role="tooltip"
            {...rest}
            ref={ref}
            className={classes}
            style={{ opacity, ...style }}
        >
            {children}
        </div>
    );
});

Tooltip.displayName = "Tooltip";

export default Tooltip;

4. Create a Whisper component

Next, create a new Whisper component that will display the tooltip when hovered over:

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';

const StyledWhisper = styled.div`
  position: relative;
  display: inline-block;
`;

const StyledSpeaker = styled.div`
  position: absolute;
  z-index: 1;
  top: 130%;
  left: 50%;
  transform: translate(-50%, -50%);
  &:after {
    content: " ";
    position: absolute;
    ${({ placement }) => placement === 'top' ? `
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
    ` : placement === 'bottom' ? `
      bottom: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent #555 transparent;
    ` : placement === 'left' ? `
      top: 50%;
      right: 100%;
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent #555 transparent transparent;
    ` : placement === 'right' ? `
      top: 50%;
      left: 100%;
      margin-top: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent transparent #555;
    ` : ''}
  }
`;

const StyledTrigger = styled.div`
  display: inline-block;
`;

const StyledSpeakerContent = styled.div`
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 10px;
  position: relative;
`;

const StyledSpeakerContentText = styled.div`
  margin: 0;
  font-size: 14px;
`;

const Whisper = ({ trigger, placement = 'top', controlId, speaker, children, ...props }) => {
    const [showSpeaker, setShowSpeaker] = useState(false);

    useEffect(() => {
        let timeout;
        if (showSpeaker) {
            timeout = setTimeout(() => {
                setShowSpeaker(false);
            }, 1500);
        }
        return () => {
            clearTimeout(timeout);
        };
    }, [showSpeaker]);

    return (
        <StyledWhisper {...props}>
            <StyledTrigger
                onMouseEnter={() => setShowSpeaker(true)}
                onMouseLeave={() => setShowSpeaker(false)}
            >
                {children}
            </StyledTrigger>
            {showSpeaker && (
                <StyledSpeaker placement={placement}>
                    <StyledSpeakerContent>
                        <StyledSpeakerContentText>{speaker}</StyledSpeakerContentText>
                    </StyledSpeakerContent>
                </StyledSpeaker>
            )}
        </StyledWhisper>
    );
};

export default Whisper;

5. Use the Tooltip component in your application

Finally, use the Tooltip component in your application by wrapping it inside the Whisper component :

<Whisper placement="bottom" trigger="hover" speaker={<Tooltip>Home</Tooltip>}>
    <NavLink to="/" className="link"><GrHome size={25} className="yourClass"/></NavLink>
</Whisper>

Conclusion

In this article, we have created a simple tooltip component using React Styled Components. By using this library, we can write CSS styles in our JavaScript code, making it easy to create dynamic and reusable styles.

I hope this article has been helpful in creating your own tooltips using React Styled Components.