Incubator-echarts: echarts的tooltip中可以放图片、超链接之类的元素吗？

Created on 29 Jun 2015 · 9Comments · Source: apache/incubator-echarts

如题，可以在鼠标悬浮时的tooltip中显示图片、超链接等元素吗？

Source

gracelinmumu

Most helpful comment

大家有没发现尽管设置了enterable:true
tooltip被悬浮时还是有很大几率会消失不见了

zfengqi on 1 Dec 2015

👍3

All 9 comments

图片可以,超链接也可以放,但是你点不到

rikan on 30 Jun 2015

多谢小伙伴已经试过了，拼接字符串可以在tooltip中添加图片超链接 ~ 使用enterable: true设置tooltip为可点击操作，是可以click的 @rikan

gracelinmumu on 30 Jun 2015

👍1

怎么弄的,怎么都不贴代码的?

chensjmail on 30 Jun 2015

可以在tooltip气泡中使用字符串拼接的方式添加img、超链接等元素，设置enterable为true，使得tooltip可点击，代码如下：

tooltip: {                                 
            enterable: true,
            padding: [20, 10, 10, 20],
            backgroundColor: 'rgba(255,255,255,0.8)',
            borderColor: '#999999',
            borderRadius: 8,
            borderWidth: 1,
            width: 500,
            position: function(p) {
                return [p[0] + 20, p[1] + 20];
            },
            formatter: function(params, ticket, callback) {
                //str中的圆括号替换为尖括号
                var str = '(img class="img" src="' + params[2][5] + '" /)'
                               + '(a href="#")查看(/a)';
             return str;
            },
            trigger: 'item'  
        },

gracelinmumu on 30 Jun 2015

这个办法不错，留个记号