前端小白必须掌握的调试 Tooltip 的思路

缘由

大家在使用 Tooltip 组件的时候,都会遇到下面的情况

当鼠标 hover 上按钮,Tooltip 显示,如果此时需要调试 Tooltip 里的内容,因为鼠标移出导致 Tooltip 消失。

当我们在本地代码开发时,我们可以通过修改 hover 交互,方便调试,但是如果不能本地调试, Tooltip 这样的交互导致调试困难,下面就讲述在线上如何调试 Tooltip 的几种方式

hover 触发 Tooltip

利用 :hover 伪类选择器实现 Tooltip 显示与隐藏,示例代码如下

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tooltip Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
    }

    .tooltip-container {
      position: relative;
      display: inline-block;
    }

    .tooltip-button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: none;
      background-color: #007bff;
      color: white;
      border-radius: 5px;
      transition: background-color 0.3s ease;
    }

    .tooltip-button:hover {
      background-color: #0056b3;
    }

    .tooltip {
      visibility: hidden;
      width: 140px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 5px;
      padding: 8px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%; /* Position the tooltip above the button */
      left: 50%;
      margin-left: -70px; /* Center the tooltip */
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .tooltip::after {
      content: "";
      position: absolute;
      top: 100%; /* Arrow pointing downwards */
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #333 transparent transparent transparent;
    }

    .tooltip-container:hover .tooltip {
      visibility: visible;
      opacity: 1;
    }

  </style>
</head>
<body>
<div class="tooltip-container">
  <button class="tooltip-button">Hover me</button>
  <div class="tooltip">This is a tooltip</div>
</div>
</body>
</html>

在上面的示例代码中

css 复制代码
.tooltip-container:hover .tooltip {
    visibility: visible;
    opacity: 1;
  }

这一段代码是核心逻辑,所以在线上产品中,我们要找到这段实现逻辑,让 :hover 处于激活状态,以方便调试

选择指定的 DOM,点击右侧的 :hov 选项,选中 hover 选项,Tooltip 就会一直显示在页面上,方便我们调试。大家按照我说的方式可以试一试

控制 class 类名

除了利用 CSS 的 :hover 控制 Tooltip 外,还可以使用 JS 通过控制 CSS 类来控制 Tooltip 的显示与隐藏

下面使用大名鼎鼎的 Ant Design 组件库中的 Tooltip 组件举例子。下面是 Ant Design 官网 Tooltip 的例子

我们重点关注 pink 按钮,鼠标移入,Tooltip 内容显示,鼠标移出,Tooltip 内容消失

当鼠标移入,Tooltip 内容显示,此时 class 内容如下

当鼠标移出,Tooltip 内容消失,此时 class 内容如下

通过对比发现,控制 Tooltip 显示与隐藏的是 ant-tooltip-hidden 类,那么只需要找到 ant-tooltip-hidden 声明的样式,修改样式可以让 Tooltip 内容一直显示,方便调试

从上面的分析中可以看出,实现 Tooltip 的显示和隐藏逻辑,背后都是通过样式控制的

利用断点调试

Chrome DevTools 的断点是一种调试工具,允许你在特定的 DOM 元素发生修改时暂停 JavaScript 代码的执行。这样你可以在 DOM 树的更改时检查和调试 JavaScript 代码,特别是与 DOM 交互相关的代码。可以利用断点调试 Tooltip 的内容

请看下面的示例代码

jsx 复制代码
import React, { useState } from "react";
import "./Tooltip.css";

const Tooltip = ({ text, children }) => {
  const [showTooltip, setShowTooltip] = useState(false);

  const handleMouseEnter = () => {
    setShowTooltip(true);
  };

  const handleMouseLeave = () => {
    setShowTooltip(false);
  };

  return (
    <div
      className="tooltip-container"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {showTooltip && <div className="tooltip">{text}</div>}
    </div>
  );
};

export default Tooltip;

上面的示例代码使用 JS 来控制 Tooltip 内容,当调用 onMouseEnter 事件时,tooltip 内容显示,当调用 onMouseLeave 时,tooltip 内容消失

打开开发者工具,找到 Mouse 相关断点,勾选上

当鼠标移入,会有下面的效果

找到对应的 DOM 节点,就可以调试 Tooltip 里面的内容

总结

不管采用那种方式实现 Tooltip 的显示和隐藏逻辑,背后都是通过样式控制,所以调试 Tooltip 一定要耐心找到控制的样式

相关推荐
知识分享小能手30 分钟前
Html5学习教程,从入门到精通,HTML5 简介语法知识点及案例代码(1)
开发语言·前端·javascript·学习·前端框架·html·html5
IT、木易33 分钟前
大白话React第二章深入理解阶段
前端·javascript·react.js
晚安72038 分钟前
Ajax相关
前端·javascript·ajax
图书馆钉子户40 分钟前
怎么使用ajax实现局部刷新
前端·ajax·okhttp
bin91531 小时前
DeepSeek 助力 Vue 开发:打造丝滑的单选按钮(Radio Button)
前端·javascript·vue.js·ecmascript·deepseek
qianmoQ1 小时前
第五章:工程化实践 - 第五节 - Tailwind CSS 常见问题解决方案
前端·css
那就可爱多一点点1 小时前
超高清大图渲染性能优化实战:从页面卡死到流畅加载
前端·javascript·性能优化
不能只会打代码2 小时前
六十天前端强化训练之第一天HTML5语义化标签深度解析与博客搭建实战
前端·html·html5
OpenTiny社区3 小时前
Node.js技术原理分析系列——Node.js的perf_hooks模块作用和用法
前端·node.js
菲力蒲LY3 小时前
输入搜索、分组展示选项、下拉选取,全局跳转页,el-select 实现 —— 后端数据处理代码,抛砖引玉展思路
java·前端·mybatis