0

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?

Community
  • 1
  • 1
turtle
  • 7,533
  • 18
  • 68
  • 97

1 Answers1

1

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');
});
mccannf
  • 16,619
  • 3
  • 51
  • 63
  • Thanks for the help. Unfortunately, this did not work. My tooltips appear on hover, but not on page load. – turtle Jul 15 '14 at 09:54
  • So strange. With your new code, the JQuery selections are working properly, but I still do not get tooltips showing up on page load? – turtle Jul 15 '14 at 14:50