jQueryUI Tooltip无法显示时钟及宽度调整问题咨询

问题核心原因 #

你的代码存在两个关键问题，直接导致Tooltip和时钟无法正常显示：

1. DOM元素移动冲突：当你在content函数中返回$(this)（原canvas元素）时，jQuery UI Tooltip会将该元素从原DOM位置移动到Tooltip容器内。这会导致页面上原本的hover触发源（小号canvas）被移除，Tooltip失去触发目标，自然无法正常显示。
2. 元素修改时机错误：直接修改原canvas的尺寸并重新初始化时钟，会干扰原元素的hover状态，再加上元素被移走的问题，后续所有DOM操作都会失效。

修复方案 #

不要操作原canvas元素，而是克隆一个独立的canvas实例到Tooltip中，对克隆后的元素调整尺寸并初始化时钟。这样原canvas保留在页面上作为hover触发源，Tooltip内显示独立的大号时钟。

修复后的完整代码 #

JavaScript 代码

// 初始化页面上的小号时钟
$("#customClock").htAnalogClock({
  fillColor: "rgba(255, 100, 255, 0.2)",
  fontColor: "#000",
  pinColor: "#f80",
  majorTicksColor: "#000",
  minorTicksColor: "#111",
  hourHandColor: "#00f",
  minuteHandColor: "#0f0",
  drawSecondHand: true
});

// 配置Tooltip
$("#customClock").tooltip({
  content: function() {
    // 克隆原canvas并设置新尺寸、新ID（避免重复ID冲突）
    const clonedCanvas = $(this).clone().attr({
      "width": 240,
      "id": "tooltip-clock"
    });
    // 初始化克隆后的大号时钟
    clonedCanvas.htAnalogClock({
      fillColor: "rgba(255, 100, 255, 0.2)",
      fontColor: "#000",
      pinColor: "#f80",
      majorTicksColor: "#000",
      minorTicksColor: "#111",
      hourHandColor: "#00f",
      minuteHandColor: "#0f0",
      drawSecondHand: true
    });
    // 返回克隆的canvas作为Tooltip内容
    return clonedCanvas;
  },
  // 自定义Tooltip样式，确保容纳大号时钟
  tooltipClass: "clock-tooltip"
});

补充CSS（优化Tooltip显示）

.clock-tooltip {
  padding: 4px;
  border-radius: 4px;
}
.clock-tooltip canvas {
  display: block;
}

HTML 代码（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://www.jqueryscript.net/demo/analog-clock-timezone/jquery.ht-analog-clock.js"></script>

<canvas id="customClock" width="70"></canvas>

额外说明 #

• 克隆canvas时重置ID，避免DOM中出现重复ID的无效元素。
• 通过tooltipClass自定义样式，可以避免Tooltip的默认padding或overflow属性遮挡时钟。
• 该方案完全分离了触发源和Tooltip内容，彻底解决了DOM移动带来的冲突问题。

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