open-vault/ui/app/templates/components/clients/line-chart.hbs

<svg
  data-test-line-chart
  class="chart has-grid"
  {{on "mouseleave" this.removeTooltip}}
  {{did-insert this.renderChart @dataset}}
  {{did-update this.renderChart @dataset}}
>
</svg>

{{! TOOLTIP }}

{{#if this.tooltipTarget}}
  {{! Required to set tag name = div https://github.com/yapplabs/ember-modal-dialog/issues/290 }}
  {{! Component must be in curly bracket notation }}
  {{! template-lint-disable no-curly-component-invocation }}
  {{#modal-dialog
    tagName="div"
    tetherTarget=this.tooltipTarget
    targetAttachment="bottom middle"
    attachment="bottom middle"
    offset="35px 0"
  }}
    <div class="chart-tooltip line-chart">
      <p class="bold">{{this.tooltipMonth}}</p>
      <p>{{this.tooltipTotal}}</p>
      <p>{{this.tooltipNew}}</p>
      {{#if this.tooltipUpgradeText}}
        <br />
        <p class="has-text-highlight">{{this.tooltipUpgradeText}}</p>
      {{/if}}
    </div>
    <div class="chart-tooltip-arrow"></div>
  {{/modal-dialog}}
{{/if}}