constructor({
    parent, title, items, position, unxkcdify, backgroundColor, strokeColor,
  }) {
    this.title = title;
    this.items = items;
    this.position = position;
    this.filter = !unxkcdify ? 'url(#xkcdify)' : null;
    this.backgroundColor = backgroundColor;
    this.strokeColor = strokeColor;

    this.svg = parent.append('svg')
      .attr('x', this._getUpLeftX())
      .attr('y', this._getUpLeftY())
      .style('visibility', 'hidden');

    this.tipBackground = this.svg.append('rect')
      .style('fill', this.backgroundColor)
      .attr('fill-opacity', 0.9)
      .attr('stroke', strokeColor) // FIXME: find a good way to calculate boder color form this.strokeColor
      .attr('stroke-width', 2)
      .attr('rx', 5)
      .attr('ry', 5)
      .attr('filter', this.filter)
      .attr('width', this._getBackgroundWidth())
      .attr('height', this._getBackgroundHeight())
      .attr('x', 5)
      .attr('y', 5);

    this.tipTitle = this.svg.append('text')
      .style('font-size', 15)
      .style('font-weight', 'bold')
      .style('fill', this.strokeColor)
      .attr('x', 15)
      .attr('y', 25)
      .text(title);

    this.tipItems = items.map((item, i) => {
      const g = this._generateTipItem(item, i);
      return g;
    });
  }
@param {String} parent
@param {String} title
@param {Array} items
@param {Object} position
@example
{
   parent: {}, // a d3 selection component
   title: 'tooltip title',
   items:[{
     color: 'red',
     text: 'tim: 13'
   }],
   position: {
     type: 'upleft'
     x: 100,
     y: 230,
   }
}