2

How can I get rid of the labels (on the left) in a tooltip so that just the text on the right appears across the entire width of the tooltip?

1 Answers1

0

Check the d3plus documentation here: .tooltip()

By default, the "Size" and "Share" values are shown in the "small" tooltip that you see when you hover over a tree map square. There is also a "large" tooltip that you see when you click on a tree map square. You can thus create a custom large tooltip by specifying:

.tooltip({
  "share": false,    // turns off the "Share" value
  "size": false,     // turns off the "Size" value
  "children": false, // turns off the list of child nodes if multi-level
  "stacked": true,
  "html": function(d) {
    return "any valid html code here" 
  }
})

Note that this currently only works for the "large tooltip" that you see when you click on a tree map box. In a multi-level tree map, this means that you can only customize the tooltip (as far as I know) for the lowest level tree map and only when you click on the box (not hovering tooltip).

From playing around with this, it looks like you can only get the text label of the tree map box that you clicked on, not the data object - which would be more useful for customizing your own tooltip.

It would also be helpful to be able to provide custom html for a hovering tool tip as well - this is important for multi-level tree maps.

Mac471
  • 423
  • 5
  • 16