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