如何在所有图表上制作React Recharts工具提示模式？

Question

我正在使用React Recharts（http://recharts.org）来绘制带有自定义工具提示的条形图。

 <BarChart width={400} height={300} data={data}
        margin={{top: 5, right: 30, left: 10, bottom: 5}}>
          <XAxis dataKey="name"/>
          <YAxis/>
          <CartesianGrid strokeDasharray="3 3"/>
          <Tooltip content={<CustomTooltip/>}/>
          <Legend />
          <Bar dataKey="pv" barSize={20} fill="#8884d8" />
   </BarChart>

但我的工具提示框非常大，如下例所示：

http://jsfiddle.net/jiangzhang/zjbbbdtj/11/

我发现工具提示框的一部分隐藏在第二张图表后面。如何在所有图表之上制作模态？

Answer 1

您或许可以在自定义内容呈现器中使用 React Portals <Tooltip content={renderTooltip} />

这是一个没有门户的基本示例：http://recharts.org/en-US/examples/CustomContentOfTooltip

Recharts 问题在此处设为默认值：https://github.com/recharts/recharts/issues/2458

Answer 2

您可以尝试使用css设置工具提示元素的z顺序样式，使其高于文档中的所有其他元素。

Answer 3

谢谢你。我在工具提示元素上设置z-index之后发现它有效。