如何在使用Material UI的React卡片滑块项目中实现悬停Tooltip

实现步骤 #

• 第一步：将Tooltip相关样式添加到Material-UI的makeStyles配置中，注意Material-UI嵌套样式的写法，hover伪类需要用&指代当前类，子样式需要用$引用
• 第二步：调整JSX结构，将需要触发悬停效果的元素包裹在tooltip类容器内，同时把提示内容放在容器内的tooltiptext类标签中
• 第三步：修正现有代码的语法错误和异常配置

样式修改参考 #

在原有useStyles的配置对象中新增如下样式：

const useStyles = makeStyles((theme) => ({
  // 原有样式保留，新增以下内容
  tooltip: {
    position: "relative",
    display: "inline-block",
    borderBottom: "1px dotted black",
    "&:hover $tooltiptext": {
      visibility: "visible",
      transform: "translateY(-10px)",
      transition: "all 1s ease",
    }
  },
  tooltiptext: {
    visibility: "hidden",
    width: "120px",
    fontFamily: "lato, sans-serif",
    border: "2px solid black",
    color: "black",
    textAlign: "center",
    borderRadius: "20px",
    padding: "5px 0",
    position: "absolute",
    zIndex: 1,
    // 可根据需求调整Tooltip位置，以下配置为居中悬浮在元素上方
    bottom: "100%",
    left: "50%",
    marginLeft: "-60px",
    marginBottom: "8px"
  },
  // 修正原有sliderBox的错误配置
  sliderBox: {
    overflowX: "hidden",
    marginTop: "-40px",
  },
  // 原有其他样式保持不变
  slider: {
    [theme.breakpoints.down("sm")]: {
      display: "none",
    },
    marginTop: "250px",
  },
  serviceSlider: {
    display: "flex",
    justifyContent: "center",
  },
  TextDiv: {
    display: "flex",
    flexFlow: "column",
    height: "100%",
    justifyContent: "center",
    maxWidth: "170px",
  },
  title: {
    letterSpacing: "0.2px",
    display: "inline-block",
    marginBottom: "4px",
    fontSize: "16px",
    lineHeight: "24px",
    fontWeight: "400",
    fontFamily: "latobold, sans-serif",
  },
  ItemSlider: {
    display: "grid",
    transition: "0.2s ease-in-out",
    [theme.breakpoints.down("sm")]: {
      transition: "0.2s ease-in-out",
    },
  },
  img: {
    [theme.breakpoints.down("xl")]: {
      width: "700px !important",
      borderRadius: "50px",
    },
    [theme.breakpoints.down("lg")]: {
      width: "300px !important",
      borderRadius: "0px",
    },
    width: "300px",
  },
}));

JSX结构修改参考 #

补全Img3的导入，调整卡片内的结构，示例如下：

import React, { useState } from "react";
import ItemsCarousel from "react-items-carousel";
import { makeStyles } from "@material-ui/core/styles";
import Img1 from "../assest/sliderImage/img1.png";
import Img3 from "../assest/sliderImage/img3.png"; // 补全Img3的导入
import Button from "@material-ui/core/Button";

const ImgSlider = () => {
  const classes = useStyles();
  const [activeItemIndex, setActiveItemIndex] = useState(0);
  const chevronWidth = 60;
  return (
    <div className={classes.slideContainer}>
      <h2 className={classes.h2}>Browse popular categories</h2>
      <div className={classes.sliderBox}>
        <ItemsCarousel
          className={classes.ItemSlider}
          requestToChangeActive={setActiveItemIndex}
          activeItemIndex={activeItemIndex}
          numberOfCards={3}
          slidesToScroll={3}
          gutter={0} >
          {/*  plumber卡片添加Tooltip示例 */}
          <div className={classes.Img1}>
            <div className={classes.TextDiv}>
              <strong className={classes.title}>
                <div className={classes.tooltip}>
                  <img className={classes.img} src={Img1} />
                  <span className={classes.tooltiptext}>管道维修相关服务</span>
                </div>
                <p>Plumber</p>
              </strong>
              <span>
                <span></span>
              </span>
            </div>
          </div>
          {/* Remodeling卡片 */}
          <div className={classes.Img1}>
            <div className={classes.TextDiv}>
              <strong className={classes.title}>
                <div className={classes.tooltip}>
                  <img  className={classes.img} src={Img3} />
                  <span className={classes.tooltiptext }>改造翻新相关服务</span>
                </div>
                <p >Remodeling</p>
              </strong>
              <span className={classes.price}>
                <span></span>
              </span>
            </div>
          </div>
        </ItemsCarousel>
      </div>
    </div>
  );
};

export default ImgSlider;

实现效果 #

内容的提问来源于stack exchange，提问作者Stas Pegov