Highcharts中Renderer创建的SVG元素添加带粗体Tooltip的问题

数据老陈

2026-7-7

实现SVG元素的富文本Tooltip（含部分加粗）

原生SVG的title属性只能渲染纯文本，你写的<b>标签会被当成普通字符串原样显示，所以没法实现部分文本加粗的效果。要制作带格式的Tooltip，得用HTML元素来实现，下面是具体的解决方法：

步骤1：添加Tooltip容器

在页面的HTML部分插入一个用于显示Tooltip的div（可放在<body>任意位置）：

<div id="custom-tooltip" style="display:none; position:absolute; background:#333; color:#fff; padding:6px 8px; border-radius:4px; font-size:14px; pointer-events:none; z-index:9999;"></div>

步骤2：修改SVG元素的JS代码

放弃使用SVG的title属性，改为通过鼠标事件控制自定义Tooltip的显示/隐藏和内容：

// 初始化Raphael画布
var paper = Raphael(0, 0, 200, 200);

// 创建圆形元素
var circle = paper.circle(100, 100, 50)
  .attr({
    fill: 'red',
    stroke: 'black',
    'stroke-width': 2
  })
  .add();

// 获取自定义Tooltip元素
var tooltip = document.getElementById('custom-tooltip');

// 绑定鼠标事件
circle
  // 鼠标移入时显示Tooltip
  .hover(function(e) {
    // 设置带HTML格式的Tooltip内容
    tooltip.innerHTML = 'This is the partially <b>bold</b> Tooltip for the circle';
    tooltip.style.display = 'block';
    // 设置初始位置（鼠标右侧偏移10px）
    tooltip.style.left = e.pageX + 10 + 'px';
    tooltip.style.top = e.pageY + 10 + 'px';
  }, function() {
    // 鼠标移出时隐藏Tooltip
    tooltip.style.display = 'none';
  })
  // 鼠标移动时Tooltip跟随鼠标
  .mousemove(function(e) {
    tooltip.style.left = e.pageX + 10 + 'px';
    tooltip.style.top = e.pageY + 10 + 'px';
  });