Show HN: Bootstrap styled tooltips for d3(bl.ocks.org)
bl.ocks.org
Show HN: Bootstrap styled tooltips for d3
http://bl.ocks.org/2981335
5 comments
Tooltips that follow the cursor, rather than stably label the element they describe, seem against the clean and rigorous Bootstrap/D3 aesthetics.
They're also harder to read.
Agreed on both counts.There is some neat stuff going on with Voroni diagrams in this thread[0] that I am probably going to try and work in next. Any suggestions for how to label something like this[1]?
[0]https://groups.google.com/forum/#!topic/d3-js/wSAoKPg125s) [1]http://bl.ocks.org/2869946
[0]https://groups.google.com/forum/#!topic/d3-js/wSAoKPg125s) [1]http://bl.ocks.org/2869946
Maps are extra hard to do in an automated/general fashion. Perhaps a translucent label always at the center of the region? (Though, with small regions the label would also tend to be overlapped by the cursor which popped it.)
A compromise between 'always stable' position and 'follows mouse' is for the position to stay stable for any one pop (so that it perhaps is cursor-entry influenced), but then vary on next entry.
A compromise between 'always stable' position and 'follows mouse' is for the position to stay stable for any one pop (so that it perhaps is cursor-entry influenced), but then vary on next entry.
The pop compromise is an option now. Thanks. Should push out a better version in the next week or so.
For me, the topmost few tooltips show up flowing to the left and get chopped by the edge of the block all the dots are in; all I can see of the very top one is "?".
Safari 5.1.7 on OSX.
Safari 5.1.7 on OSX.
That's a "feature". Poor design on the example's part, pushing a new and improved one this week with all the suggestions so far.
Nice! Im'm currently working on a similar project with bootstrap adm decided to use qTip. It plays nice with bootstrap
Neat, a pity I didn't have this a few weeks ago, when I wrote my own (for showing the value on hover in a time series)
I have to say, my version had fixed placement instead (using the dot position and a relative adjustment respect to its size)
People keep bringing that up and I agree. I am trying to figure out how to make it general though. Ideally someone should be able to call this function on any svg element, whether it's a point (circle), path, or what have you. Still thinking through how to make that work.
Yes, I understand. I wrote a mouseover method for the dots, which kind of works but it's a mess as soon as you have several graphs on the same page (hint: rewriting the callback definition of the csv reader saved my day after all...)
Nice work Zack. D3 and Bootstrap work really well together stylistically.