页面加载时显示D3工具提示

Question

我正在使用Tipsy生成通过D3生成的SVG圈子的工具提示。我的代码是从this example开始的。使用此代码，当我将鼠标悬停在圆形对象上时，我的工具提示显示正常：

$('.circles').tipsy({ title: 'My tooltip text' })

有没有办法让页面加载显示工具提示而不是悬停？我尝试过使用show，但这似乎不起作用：

$('.circles').tipsy({ title: 'My tooltip text' })      // show tips on hover
$('.circles').tipsy('show')                            // show tips on page load?

理论上based on this example question似乎可以在页面加载时显示工具提示。但是，我无法弄清楚如何操纵D3来使这个逻辑工作。如何在页面加载和悬停时显示我的工具提示？

Answer 1

奇怪的是 - 对于每个圈子的选择器，tipsy不能很好地工作，所以不得不使用JQuery each函数来使它工作。您还必须在tipsy中设置选项trigger: 'manual'。

$('.circles').each(function() {
   $(this).tipsy({ 
    trigger: 'manual',
    gravity: 'w', 
    html: true, 
    title: function() {
      return 'My tooltip text'; 
    }
   });

   $(this).tipsy('show');
});