使用 D3 中的 Tipsy 使悬停文本变小

Question

Tipsy 用于在将鼠标悬停在我的节点上时显示大量文本，我想将这些文本变小。我该怎么做？

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

Answer 1

将您要返回的标题文本包装成具有您希望的 font-size 样式的跨度.. 例如，我将字体大小设置为 10 px，您可以将其重置为这样的大小适合你的情况。

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

使用 D3 中的 Tipsy 使悬停文本变小

Make hover text smaller using Tipsy in D3

javascript

css

tipsy