

Show HN: Bootstrap styled tooltips for d3 - zackzackzack
http://bl.ocks.org/2981335

======
gojomo
Tooltips that follow the cursor, rather than stably label the element they
describe, seem against the clean and rigorous Bootstrap/D3 aesthetics.

~~~
kevingadd
They're also harder to read.

~~~
zackzackzack
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>

~~~
gojomo
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.

~~~
zackzackzack
The pop compromise is an option now. Thanks. Should push out a better version
in the next week or so.

------
egypturnash
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.

~~~
zackzackzack
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.

------
dotmike
Nice! Im'm currently working on a similar project with bootstrap adm decided
to use qTip. It plays nice with bootstrap

------
RBerenguel
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)

~~~
RBerenguel
I have to say, my version had fixed placement instead (using the dot position
and a relative adjustment respect to its size)

~~~
zackzackzack
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.

~~~
RBerenguel
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...)

------
michaelbuckbee
Nice work Zack. D3 and Bootstrap work really well together stylistically.

