无法在plotly.js中格式化自定义hoverLabel

Question

我想在散点图中实现自定义悬停工具提示。我确实添加了功能，但是无法对其添加样式更改。

        const hoverInfo = this.state.chartData.data.map(i => `<span className="chart-tooltip">
        <span className="tooltip-value" style='font-size:13px;padding-left:0px;width:20px;'>
            Username: <span>${i.sourceUserName} </span><br>
            Duration: <span style='margin-top:10px;'>${this.getDuration(i.metric.duration)}</span><br> 
            Started: ${moment(i.firstEventTime).format('DD MMM YYYY [at] hh:mm:ss a')} <br> 
            Ended:${moment(i.lastEventTime).format('DD MMM YYYY [at] hh:mm:ss a')}
            </span>
        </span>`);
        return hoverInfo;
    }
text: mapText,
      hovertext: this.getHoverInfo(),
      hoverinfo: 'text',
      textposition: 'right'

我想将对齐方式应用于工具提示中的文本以及一些样式更改。但是当我使用className这样做时，它不起作用。