function Tooltips(eventBus, canvas) {

  this._eventBus = eventBus;
  this._canvas = canvas;

  this._ids = ids;

  this._tooltipDefaults = {
    show: {
      minZoom: 0.7,
      maxZoom: 5.0
    }
  };

  /**
   * @type {Record<string, Tooltip>}
   */
  this._tooltips = {};

  // root html element for all tooltips
  this._tooltipRoot = createRoot(canvas.getContainer());


  var self = this;

  domDelegate.bind(this._tooltipRoot, tooltipSelector, 'mousedown', function(event) {
    event.stopPropagation();
  });

  domDelegate.bind(this._tooltipRoot, tooltipSelector, 'mouseover', function(event) {
    self.trigger('mouseover', event);
  });

  domDelegate.bind(this._tooltipRoot, tooltipSelector, 'mouseout', function(event) {
    self.trigger('mouseout', event);
  });

  this._init();
}
A service that allows users to render tool tips on the diagram.

The tooltip service will take care of updating the tooltip positioning
during navigation + zooming.

@example

```javascript

// add a pink badge on the top left of the shape
tooltips.add({
  position: {
    x: 50,
    y: 100
  },
  html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>'
});

// or with optional life span
tooltips.add({
  position: {
    top: -5,
    left: -5
  },
  html: '<div style="width: 10px; background: fuchsia; color: white;">0</div>',
  ttl: 2000
});

// remove a tool tip
var id = tooltips.add(...);

tooltips.remove(id);
```

@param {EventBus} eventBus
@param {Canvas} canvas