Javascript 图表轴标签标题过长

比如说，我有一个很长的轴标题，就像这里的：
我想要实现的是截断长标题，并在提示中显示它。我知道它可以简单地用如下方式截断：

//...
title: {
          text: 'Temperature (°C)'.substring(0, 10) + "..." 
       },
//...

但我怎样才能在上面应用提示呢？我知道可以使用中的

svg

元素来完成，但highcharts似乎无法在

title.text

中正确解析此类标记

---

所以可能有人知道解决这个问题的方法吗？

我认为有很多方法可以解决这个问题，所有这些方法都涉及到使用标题的

useHTML

属性

这里有一个快速而肮脏的实现作为起点

HTML

<div id="wrapper">
  <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
  </div>
  <div id="divCT"><strong>Long Text Message</strong><br />
    This is such a big axis title that it cannot be fully displayed and overlaps everything. So loooooooooooooooooooooooooooooooooooooong</div>
</div>

CSS

#wrapper {
    position: relative; 
    margin: 0; 
    padding: 0;
}
#highCT {
    text-decoration: none;
}
#divCT {
    position: absolute; 
    top: 100px; 
    left: 40px; 
    width: 300px;
    display: none;   
    z-index: 20000; 
    background-color: #000; 
    color: #FFF;
    font: 10pt Arial, sans-serif;
    padding: 10px;
}

---

然而，如果你不得不使用这么长的标题，我想知道你的图表是怎么回事。在不了解更多信息的情况下，乍一看，您似乎希望保持标题简短，并在图表附近的某个位置添加始终可见的描述性文本，或者至少通过其他方式（而不是在侧标题上悬停/单击）可见

---

…横向利益：

---

（如果你想用标题上的a标签来解决这个问题）

Wow，我想

useHTML

属性正是我想要的。谢谢

$("#highCT").on(
    {
        mouseenter: function() {
            $("#divCT").show();
        },
        mouseleave: function() {
            $("#divCT").hide();
        }    
    }
);

#wrapper {
    position: relative; 
    margin: 0; 
    padding: 0;
}
#highCT {
    text-decoration: none;
}
#divCT {
    position: absolute; 
    top: 100px; 
    left: 40px; 
    width: 300px;
    display: none;   
    z-index: 20000; 
    background-color: #000; 
    color: #FFF;
    font: 10pt Arial, sans-serif;
    padding: 10px;
}