Tooltip (D3 Convention) | Chris Henrick | Observable
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
ojs
Author
Chris Henrick
@clhenrick
Maps, Data, Viz, UX, Design
Comments (6)
Fabian Iwand
Mar 19, 2021
Since you're only ever accessing .id, you may want to change this to DOM.uid().id
Chris Henrick
Mar 29, 2021
thanks for the tip
Reply
Fabian Iwand
Mar 19, 2021
What is the purpose of the negative left offset?
Chris Henrick
Mar 19, 2021
If you didn't want to use `display: none` to hide it and still have it be visible to screen readers you can use this approach instead.
Reply
Adam Pearce
Mar 29, 2021
If you namespace the listeners, it'll be easier for the calling chart to style the mouseover point or attach an additional mouseover listener without clobbering the tooltip one:
https://github.com/gka/d3-jetpack/blob/master/src/attachTooltip.js#L12-L16
https://github.com/gka/d3-jetpack#attachTooltip
Chris Henrick
Mar 29, 2021
Good idea, thanks!
Reply
Add comment
Subscribe to notifications
© 2026 Observable, Inc.
Terms of service
Privacy policy
Product
About
Pricing
Documentation
Release notes
Contact us
Open source
Notebook Kit
Plot
D3
Community
Public
Forum
Bluesky
YouTube
X
Observable
Sign up
Chris Henrick
67
Reply
Reply
Reply
Add comment
Subscribe to notifications
26
Tooltip (D3 Convention) | Chris Henrick | Observable