React Bootstrap 覆盖层（工具提示和弹出框）

React Bootstrap 支持多个组件，用于定位漂亮的覆盖层、工具提示、弹出框和其他组件。

主要使用覆盖层来定位和控制工具提示和弹出框的可见性。 它充当提供过渡和切换功能的包装器。 在普通的 Bootstrap 中，这些组件功能背后的 JavaScript 是用 popper.js 文件编写的。 但是，在 React Bootstrap 中，其相关的 JavaScript 与覆盖组件本身捆绑在一起。

以下是与 Overlay 组件相关的一些注意事项

• 一般来说，覆盖层功能依赖于第三方 JavaScript 库 popper.js。 但是，在 React Bootstrap 中，它与组件捆绑在一起。
• <Tooltip> 和 <Popover> 组件不包含用于定位自身的样式。 因此，我们必须使用 ref 和 style 属性在 <Overlay> 或 <OverlayTrigger> 组件中定义它们。
• Tooltip 根据 <Overlay> 中指定的 prop 工作
• 要在禁用的元素上指定 Tooltip，我们必须在包装器元素上触发它。

如何创建覆盖层？

要创建覆盖层，我们需要至少两个元素，即 overlay 和 target。 overlay 指定要定位的元素，target 指定与覆盖层相关的元素。 我们可以选择不同的选项来注入 props，例如箭头以使覆盖层更具体，但它们是可选的。

要导入 Overlay 组件，请使用以下语法

要导入 OverlayTrigger 组件，请使用以下语法

要导入 Tooltip 组件，请使用以下语法

要导入 Popover 及其子组件，请使用以下语法

让我们通过一个例子来理解它

App.js

输出

当我们单击按钮时，它将切换工具提示的可见性。

在上面的示例中，我们采用了一个覆盖组件，并使用内联 CSS 在 div 元素中创建了一个工具提示。 我们使用 useState hook 切换它，并使用 React ref 定位元素。 如果您不了解 React hook 和 Refs，请将上面的代码复制并粘贴到您的组件文件中，并带有正确的导入语句。 它可以正常工作，如显示的输出。

OverlayTrigger 组件

<OverlayTrigger> 组件是可选的，可以为工具提示添加其他功能。 通常，上面的示例在开发人员中非常常见，但他们更喜欢 OverlayTrigger 来添加其他功能，例如延迟、显示、隐藏和其他触发器。

触发组件应该能够使用 ref，因为当 <OverlayTrigger> 组件加载时，它会尝试添加一个。 我们可以使用 forwardRef() 为组件添加功能。

考虑下面的示例

App.js

输出

从上面的输出中，我们使用 <OverlayTrigger> 组件在悬停按钮时添加了工具提示。

如何自定义触发行为？

我们可以自定义 <OverlayTrigger> 组件的行为以获得更高级的功能。 这些功能接受一个函数子组件，该子组件传递与配置的触发 prop 相关的注入的 ref 和事件处理程序。

我们可以手动将 props 指定给我们要从一组元素中分离出来的任何元素。 在以下示例中，我们将看到如何相对于特定元素定位 Tooltip。

考虑下面的示例

App.js

输出

从上面的输出中，当悬停在按钮组件上时，将显示带有图像的 Tooltip。 同样，我们可以将 Tooltip 与任何组件绑定。

React Bootstrap 中的工具提示

工具提示组件用于创建漂亮且正确对齐的工具提示，并将其与组件相关联。 我们可以将 Tooltip 与任何组件一起使用； 例如，如果我们想将 Tooltip 与锚标记一起使用，我们可以指定锚标记。

我们可以将 overlay 注入的 props 直接传递给 Tooltip 组件以创建工具提示。

考虑下面的示例

App.js

输出

从上面的输出中，我们使用 React useState 和 Overlay 组件在按钮单击时创建了一个 Tooltip。

创建工具提示的另一种方法是将 Tooltip 元素传递给 OverlayTrigger 组件。

考虑下面的示例

App.js

输出

从上面的输出中，我们使用 React map 方法 渲染了具有不同位置的多个工具提示。

React Bootstrap 中的弹出框

弹出框是非常有用的 Web 组件，可以使网站看起来和感觉更具动态性。 它们旨在显示有关鼠标单击事件触发的任何组件的其他信息。

在弹出框组件中，当我们单击我们在代码中指定的任何元素时，它将显示一条带有预先设计的布局的指定消息。

React Bootstrap 弹出框可以使用 <Popover> 组件轻松集成。 它还支持 <Popover.Header> 和 <Popover.Body> 组件来指定消息标题和内容。

让我们通过以下示例来理解它

App.js

输出

从上面的输出中，我们使用弹出框组件创建了一个漂亮的消息框。 它将在单击按钮时显示。 我们可以使用任何其他组件来代替按钮。

与 Tooltip 一样，我们可以通过指定 placement prop 来控制 Popover 的位置。

考虑下面的示例

App.js

输出

从上面的输出中，我们使用弹出框组件使用了具有不同位置的不同消息框。

覆盖层与禁用元素

我们还可以在禁用的元素上显示工具提示或弹出框。 当我们在组件中指定 disabled 属性时，所有操作（例如悬停或单击）都会被阻止。 但是，我们仍然可以在其上显示工具提示，以向用户提供消息。

考虑下面的示例

App.js

输出

在上面的示例中，我们向用户显示有关禁用按钮的消息。

因此，我们可以使用 Overlay、Tooltip 和 Popover 组件使用不同类型的工具提示和弹出框。 从用户体验的角度来看，它们是非常有用的组件。 我们可以通过使用这些组件向用户提供有意义的消息。

我们还可以相对于组件的更新大小动态更新覆盖层的位置。

为此，我们必须将 popper prop 与 scheduleUpdate() 方法一起使用 Overlay 组件来重新定位自身。