如何实现图片Hover时内部显示可自定义样式的Tooltip？MUI方案不符需求

要实现和原生img标签title属性一致的悬停提示效果，同时支持自定义样式，可通过以下方式调整MUI Tooltip的定位与样式：

核心实现步骤 #

1. 设置图片容器为相对定位：作为Tooltip的定位基准，确保Tooltip能相对于图片内部进行绝对定位。
2. 修改Tooltip的Popper配置：禁用默认的偏移与溢出处理，避免Tooltip被推到图片外部。
3. 自定义Tooltip样式：模拟原生title的视觉效果，同时可按需调整样式细节。

完整代码示例 #

import { Tooltip } from '@mui/material';
import styled from '@mui/material/styles/styled';

// 自定义图片容器，提供相对定位基准
const ImageContainer = styled('div')`
  position: relative;
  display: inline-block;
`;

// 自定义Tooltip样式，可按需修改
const CustomTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} classes={{ tooltip: className }} />
))`
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  /* 让Tooltip在图片内部居中显示 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 限制Tooltip宽度，避免超出图片范围 */
  max-width: 90%;
  text-align: center;
`;

function ImageWithInnerTooltip() {
  return (
    <ImageContainer>
      <CustomTooltip
        title="自定义内部提示文本"
        // 禁用Popper默认的偏移与溢出处理，确保Tooltip紧贴容器内部
        PopperProps={{
          modifiers: [
            { name: 'offset', enabled: false },
            { name: 'preventOverflow', enabled: false },
          ],
        }}
        arrow={false} // 关闭箭头，和原生title效果一致
        placement="top" // 此处placement仅作触发参考，实际位置由自定义样式控制
      >
        <img
          src="your-image-url.jpg"
          alt="示例图片"
          style={{ width: '300px', height: 'auto', display: 'block' }}
        />
      </CustomTooltip>
    </ImageContainer>
  );
}

export default ImageWithInnerTooltip;

关键细节说明 #

• 图片容器的position: relative是实现内部定位的核心，确保Tooltip的绝对定位基于图片而非整个页面。
• 禁用Popper的offset和preventOverflow修饰符，避免MUI默认的位置调整逻辑将Tooltip推到图片外部。
• 通过styled组件自定义Tooltip的背景色、文字样式、位置等，既保留原生title的核心体验，又支持样式定制。

内容的提问来源于stack exchange，提问作者Amy Santiago