docs/articles/modulr_files/d3-tip-0.6.7/docs/positioning-tooltips.md

In openscienceunil/modulr: A Dependency Injection Framework for R

API Documentation ➤ Positioning tooltips

Positioning tooltips

tip.direction(direction)

Sets the position of a tooltip relative to a target element (except for mt which denotes placement of the tooltip at the mousetip). direction can be n, s, e, w, nw, ne, sw, se, or mt. The direction will also automatically be included as a classname on the tooltip element which allows for different style hooks based on the direction.

tip.direction('n') // Position the tooltip to the top of a target element
tip.direction('s') // Position the tooltip to the bottom of a target element
tip.direction('e') // Position the tooltip to the right of a target element
tip.direction('w') // Position the tooltip to the left of a target element

Changing the direction programatically

tip.direction(function(d) {
  if(d == 'california') return 'w'
  if(d == 'new york') return 'e'
})

tip.offset([values])

Offset a tooltip relative to its calculated position. Offset is computed from [top, left].

If you want to draw extenders on tooltips, use this method to offset the tooltip enough in the desired direction so the extender doesn't overlap the target element.

tip.offset([10, -10])

Callbacks are also supported for dynamic positioning. The following example will center tip placement within the bounding box of the target element.

tip.offset(function() {
  return [this.getBBox().height / 2, 0]
})

openscienceunil/modulr documentation built on May 3, 2019, 5:49 p.m.