Tooltip with CSS

Tooltip.module.less

.body {
  display: flex;
}

.btn {
  display: flex;
  position: relative;

  // &:hover {
  //   background: rgba(0, 0, 0, 0.15);
  // }
}

.btn-right {
  &::after {
    position: absolute;
    left: calc(100% + 0.14rem);
    border-radius: 0.04rem;
    padding: 0.05rem 0.06rem;
    display: flex;
    align-items: center;
    width: max-content;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
  }
}

.btn-top {
  justify-content: center;

  &::after {
    position: absolute;
    bottom: calc(100% + 0.14rem);
    border-radius: 0.04rem;
    padding: 0.05rem 0.06rem;
    display: flex;
    align-items: center;
    width: max-content;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
  }
}

Tooltip.tsx

import styles from '@/projects/viewer/Layouts/Default/Tooltip.module.less';
import { buildCN } from '@/utils';
import { nanoid } from 'nanoid';
import { memo, useMemo } from 'react';

const cn = buildCN(styles);

export type ToolTipProps = {
  title: string;
  position?: 'top' | 'right';
} & React.DetailedHTMLProps<
  React.HTMLAttributes<HTMLDivElement>,
  HTMLDivElement
>;

/**
 * 使用 CSS 的 Tooltip
 */
const Tooltip = ({ title, position, children, ...rest }: ToolTipProps) => {
  const id = useMemo(() => `more-btn-${nanoid()}`, []);
  const p = position ?? 'top';

  return (
    <div className={cn('body')} {...rest}>
      <style>{`#${id}:hover::after {content: '${title}';}`}</style>
      <div id={id} className={cn('btn', `btn-${p}`)}>
        {children}
      </div>
    </div>
  );
};

export default memo(Tooltip);