javascriptjqueryd3.jstipsy

D3 tooltip display on page load


I am using Tipsy to generate tooltips of SVG circles generated though D3. My code is taken right from this example. Using this code, my tooltips show just fine when I hover over my circle objects:

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

Is there a way to make tooltips show on page load rather than hover? I have tried using show, but this does not seem to work:

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

Getting tipsy to show tooltips on page load seems possible in theory based on this example question; however, I can't figure out how to manipulate D3 to make this logic work. How can I make my tooltips show on page load and on hover?


Solution

  • Strangely - tipsy does not work well with a selector for each of these circles, so had to use JQuery each function to get it to work. You also have to set the option trigger: 'manual' in tipsy.

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