timqian / chart.xkcd

xkcd styled chart lib
https://timqian.com/chart.xkcd/
MIT License
7.61k stars 200 forks source link

Position the tooltip above the title #33

Closed skvale closed 4 years ago

skvale commented 4 years ago

Describe the bug When you hover over the chart, the Tooltip shows beneath the title. In contrast, the Tooltip shows above the legend.

Screenshot

Before

Screen Shot 2019-09-11 at 1 18 26 PM

After

Screen Shot 2019-09-11 at 1 29 59 PM

How to reproduce Hover over the line so the Tooltip shows near the title of the chart

Additional context It looks like an easy fix could be to construct the Tooltip after the title is added. So the Tooltip is after the title in the DOM and shows above it.

Instead of having the New Tooltip in the constructor, you could put it in the render: src/Line.js

  render() {
    if (this.title) addLabels.title(this.svgEl, this.title);

    this.tooltip = new Tooltip({
      parent: this.svgEl,
      title: '',
      items: [{ color: 'red', text: 'weweyang' }, { color: 'blue', text: 'timqian' }],
      position: { x: 60, y: 60, type: config.positionType.dowfnRight },
      unxkcdify: this.options.unxkcdify,
    });