Tooltip with a pointer on the side

This demo shows how we can use an adapter to dynamically update tooltip bounds, so that tooltip pointer is attached to its left side, rather than in the middle.

Code

TypeScript

tooltip.adapters.add("bounds", function(bounds, target) {
  if (bounds) {
    bounds.left = target.get("pointTo").x - 20;
  }
  return bounds;
});

JavaScript

tooltip.adapters.add("bounds", function(bounds, target) {
  if (bounds) {
    bounds.left = target.get("pointTo").x - 20;
  }
  return bounds;
});

Demo

ResultJSHTMLCSSJSON

Open in:New tabChart MakerCodePenjsFiddle

Run

Tooltip with a pointer on the sidetooltip-with-a-pointer-on-the-side