Question

我们有一个应用程序来绘制一些生物信息学图像。 HighCharts.js是一个非常好的绘图仪。我知道我们可以通过API定义工具提示：

tooltip: {
    useHTML: true,
    formatter: function() { 
        return 'here the html code';
    }
},

但是如何为自定义部件添加工具提示？假设为标签here

添加工具提示

Answer 1

似乎标题字段用作工具提示（不需要jquery-ui）：

renderer.circle(200, 150, 100).attr({
    fill: '#FCFFC5',
    stroke: 'black',
    title:'Hello\nI am a \nmultiline tooltip',
    'stroke-width': 1
}).add();

行动中： http://jsfiddle.net/Snarkturne/NYZNT/

Answer 2

您无法在自定义对象上使用Highchart的默认工具提示。 renderer.text，renderer.label等等......因为他们返回SVGObject。

解决方案是创建自己的工具提示。我建议你使用像twitter boostrap这样的预定义工具提示库：

// your tooltip created with bootstrap
$(".yourlabel").tooltip({
// ^^^^^^^^^^
    'container': '#container',
    'placement': 'top',
    'title': 'Mytooltip'
});

// with
ren.label('Rasterized image', 100, 215)
    .attr({
         'class': 'yourlabel'
         //        ^^^^^^^^^
    })
    .css({
         color: colors[1],
         fontSize: '10px'
    })
    .add();

由于class属性，您可以看到我们将工具提示与您的自定义对象相关联。如果您选择使用twitter bootstrap工具提示，请不要忘记使用container属性。没有它就行不通......

以下是一个实例：http://jsfiddle.net/rttav/

这是twitter boostrap工具提示的文档：http://twitter.github.io/bootstrap/javascript.html#tooltips

Answer 3

自定义元素工具提示没有内置选项，但您可以将自己的工具提示添加到每个元素。只需使用on()函数，就像这样：

ren.path(...).attr(...).add().on('mouseOver', function () { alert ('mouseOver!'); }).on('moueOut', function () { alert('mouseOut'); });

HighCharts：自定义绘图的工具提示

3 个答案: