如何在react样式组件中添加“title”标签(用于工具提示)

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

const StyledComponent = styled.div`
  /* 添加你的样式 */
`;

const StyledComponent = styled.div`
  /* 添加你的样式 */
  position: relative;

  &:hover::before {
    content: attr(title);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #000;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  &:hover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  &:hover::before,
  &:hover::after {
    opacity: 1;
  }
`;

const App = () => {
  return (
    <StyledComponent title="这是一个工具提示">
      {/* 组件内容 */}
    </StyledComponent>
  );
};