styling the popup tooltips

[Jacob Hite]

Hi,

I'm a little stumped on how to add styling to the popup tooltips. I'd like to be able to customize the size of the popup box (add some padding, maybe round the corners), change the background color of the popup box, adjust fonts, font sizes, bold, etc...

I haven't been able to find the 'hook' to allow me to do this.

Can someone please point me in the right direction?

Thanks!

[Nick Zhu]

You cant. the tooltip is currently generated using SVG title which gets rendered as tooltip on most browser. Though it is possible to implement your own tooltip using javascript and html div however not currently supported by dc.js out-of-box.

[Jacob Hite]

Thanks Nick. I'll go ahead and implement my own. Can you advise though on how I turn off the SVG title tooltips?

[Jacob Rideout]

Something like this: http://bl.ocks.org/ilyabo/1373263 shouldn't be to hard to adopt on top of a dc chart.

[Jacob Hite]

Thanks...this looks pretty good. I'll give it a go and try it with dc. There is still the question of if you put this on top of a dc chart how can the dc tooltip be disabled so that you don't get 2 tooltips (dc's tooltip and your custom html tooltip)?

[Gordon Woodhull]

.renderTitle(false)

?

[Jacob Hite]

Doh! Yeah. I knew that... %-)

Thanks for the reminder and sorry for the silly question.

[Gordon Woodhull]

Someone also recently pointed out

https://github.com/Caged/d3-tip

on the d3 mailing list.

Please let us know what you come up with. It would be nice to have an option or an example since this is a FAQ.

[Jacob Hite]

Will look into d3-tip. Looks interesting.

Unfortunately there seems to be a bug (feature) in dc.js regarding bar charts. Setting renderTitle(false) has no effect on bar charts. I'm using dc.js 1.6.0 and looking at how bar charts get rendered on lines: 3372 - 3380

function renderBars(layer, d, i) {

  var bars = layer.selectAll("rect.bar")

        .data(d.points);

  bars.enter()

         .append("rect")

         .attr("class", "bar")

         .attr("fill", _chart.getColor)

         .append("title").text(_chart.title());

...

There is no check of if renderTitle is set to true or false. It appends the title no matter what.

[Jacob Rideout]

I went ahead and fixed the bug. 

See: https://github.com/NickQiZhu/dc.js/issues/341

[Sara Quigley]

I included some tooltips in some dc.js charts (using https://github.com/Caged/d3-tip) here:   http://saraquigley.github.io/uc-trends/

I hope that helps!

Sara

[Jacob Hite]

Thanks Jacob for the quick fix!

Thanks Sara for the pointer to d3-tip usage with dc.js!

[NK]

Hey Sara,

Any feedback on how you got rid of the browser enabled yellow tooltip boxes? I can't seem to get rid of them

Thanks

-N

[Jacob Rideout]

Not setting .title(), should work.

[jinges]

Hi Jacob,

I'm looking into building a custom tiptip. How did yours turned out? Do you have any links?

Thanks!

[Wilson Fok]

I couldn't get the tooltip to work with dc line chart, please help. Should I be using d3.selectAll('g.stack') ?

Regards,

Wilson