最近，我一直在使用VictoryJs来在我的ReactJs应用程序中创建图表。VictoryJs 是位于西雅图的Formidable实验室的一个开源库。这个库的优点在于它是基于React的，因此它有多个组件，可以让你组成不同类型的图表。今天，我们将发现更多关于VictoryTooltip的组件。
当你设计一个图表时，总是需要让用户在悬停在图表上的某一点上看到更多信息。VictoryTooltip组件使我们能够做到这一点。
基本工具提示
让我们来看看你可以用VictoryTooltip组件创建的一个基本/最简单的工具提示。为了证明这一点，我们使用VictoryChart容器和VictoryBar组件来设计/可视化一个条形图，如下所示。
值得注意的是，数据元素包括一个标签属性，它将被用作VictoryTooltip的数据。下面是上述代码中的条形图。
条形图
默认情况下，Victory在每个条形图上方显示标签，如上图所示，但我们只希望在用户将鼠标悬停在条形图上时显示标签。为了实现这一点，我们使用VictoryTooltip组件作为VictoryBar的labelComponent道具，图表将如下所示。
labelComponent={<VictoryTooltip />}
条形图
悬停时。
默认的VictoryTooltip可以使用一些可以提供给它的道具来定制。例如，指针的长度可以增加/减少，飞出的文本字体和大小可以调整。查看VictoryTooltip文档，了解更多关于不同道具的信息。
样式化的VictoryTooltip
标签道具
有时候，你的数据中可能没有标签属性，但你仍然希望有一个带有一些信息的工具提示。VictoryJs提供了一个标签道具，可以添加到VictoryBar组件中，用来格式化工具提示的文本。这个道具的功能是传递当前悬停的条形图/图表元素的数据（datum）。只有当数据没有标签属性时，这个道具才会被VictoryBar考虑。下面这行代码显示了在工具提示中出现的文本是如何被格式化的。
labels={({ datum }) => `Name: ${datum.name} score: ${datum.score}`}
带工具提示的条形图显示名字和分数
自定义飞出组件
有些时候，你想在工具提示中添加更多的信息，而你意识到默认的Flyout组件将不能以你所希望的格式来显示你的工具提示文本。在这种情况下，你可以创建一个自定义的Flyout组件，并将其作为flyoutComponent ，添加到VictoryTooltip中*。* 下面是一个自定义的Flyout React组件。
使用 SVG元素作为不同SVG元素的容器。在这种情况下，我们有一个矩形和文本元素的SVG元素。文本元素被用来显示特定点的名称和分数。值得注意的是，VictoryJs向这个Flyout组件传递了许多道具，上面我们使用了x y dx dy和datum，还有更多的道具被传递，这里是它们的完整列表。使用x和y值来确定矩形的位置和其中的文本元素，如上面的代码片段所示。
带有自定义Flyout元素的Bar char
使用ForeignObject元素在SVG中使用HTML元素。
在有些情况下，SVG元素是有限的，例如，你可能想用一些HTML元素来创建一个工具提示，而不仅仅是SVG元素。所有这些都是可能的，这要感谢ForeignObjectSVG元素，它使我们能够将HTML元素嵌入到SVG元素中。
它与之前的Flyout组件相似，但主要区别在于ForeignObject元素，它使我们能够在SVG元素中添加HTML/React组件/JSX。然后我们可以使用CSS样式属性对HTML元素进行正常的样式设置。下面是图表上的工具提示，当一个条形图被悬停时。
