CODEWITHSUNDEEP
javascriptjqueryd3.jstipsy
turtle
turtle

Reputation: 8083

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?

Upvotes: 0

Views: 604

Answers (1)

mccannf
mccannf

Reputation: 16659

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');
});

Upvotes: 1

Related Questions