Search code examples
javascriptcsstipsy

Make hover text smaller using Tipsy in D3

Tipsy is used to display a lot of text when hovering over my nodes and I'd like to make that text smaller. How do I do that?

$('.node').tipsy({ 
    gravity: 'w', 
    html: true, 
    title: function() {
        var d = this.__data__, id = d.id, inc_calls = d.inc_calls, out_calls = d.out_calls, inc_texts = d.inc_texts, out_texts = d.out_texts;
        return 'Incoming Calls: ' + inc_calls + '<br/>' + 'Outgoing Calls: ' + out_calls + '<br/>' + 'Incoming Texts: ' + inc_texts + '<br/>' + 'Outgoing Texts: ' + out_texts ; 
    }
});
Solution

  • wrap the text that you are returning for title with a span which has style with font-size that you wish.. for example i have set the font size to 10 px you can reset it to a size which fits for your situation.

    <span style="font-size:10px">+ your_title_text +</span>



$('.node').tipsy({ 
                gravity: 'w', 
                html: true, 
                title: function() {
                  var d = this.__data__, id = d.id, inc_calls = d.inc_calls, out_calls = d.out_calls, inc_texts = d.inc_texts, out_texts = d.out_texts;
                  return '<span style="font-size:10px">Incoming Calls: ' + inc_calls + '<br/>' + 'Outgoing Calls: ' + out_calls + '<br/>' + 'Incoming Texts: ' + inc_texts + '<br/>' + 'Outgoing Texts: ' + out_texts + '</span>' ; 
                }
              });