如何在 React Bootstrap 中显示工具提示

2020-05-12 08:00:00 · 飞浪

介绍您可以使用工具提示为应用程序的元素提供更多背景信息。但是，尽管工具提示被认为是一种简单有效的元素，但实现起来却很困难。对于初学者，您必须考虑各种因素，例如定位、响应式布局和不同浏览

介绍

您可以使用工具提示为应用程序的元素提供更多背景信息。但是，尽管工具提示被认为是一种简单有效的元素，但实现起来却很困难。对于初学者，您必须考虑各种因素，例如定位、响应式布局和不同浏览器的支持。幸运的是，您有几个库可以帮助您。本指南介绍了用于在 React 应用程序中显示工具提示的四个最流行的库：React Tooltip、Material UI、Bootstrap和Semantic UI。

本指南要求您熟悉 React 组件并且知道如何使用 props 和 states 来操作它们。

选择工具提示库

本指南介绍的库提供了重要的工具提示组件。使用每个库，您都可以添加工具提示、设置其内容以及配置其设置和样式。

如果您需要为 React 应用添加工具提示组件，并且不需要其他元素，请选择 React Tooltip。React Tooltip 是一个小型库，仅包含一个工具提示组件，而本指南中介绍的其他选项是提供许多其他组件的大型 UI 库。

如果您需要具有相同外观和感觉的多种元素，您可能需要部署 Material UI、Bootstrap 和 Semantic UI。您的决定可能取决于每个项目的要求和偏好。

反应工具提示

React Tooltip 仅提供工具提示组件。首先将 React Tooltip 添加到项目：

      # add with npm
npm install react-tooltip
# or with yarn
yarn add react-tooltip
    

然后，使用ReactTooltip组件显示工具提示，如下所示：

      import React from "react";

import ReactTooltip from "react-tooltip";

export default function App() {
  return (
    <div className="App">
      <button data-tip data-for="registerTip">
        Register
      </button>

      <ReactTooltip id="registerTip" place="top" effect="solid">
        Tooltip for the register button
      </ReactTooltip>
    </div>
  );
}
    

上述示例首先导入了ReactTooltip组件。ReactTooltip用于呈现工具提示的内容。请记住为工具提示和内容指定id属性。使用place和effect属性定义工具提示的位置。现在，您必须标记要显示工具提示的元素。为此，请使用data-tip和data-for自定义属性。虽然您可以为您选择的任何元素显示工具提示，但本指南中的示例涵盖了为<button>元素指定这些属性。

使用data-tip属性帮助 React Tooltip 找到元素。data -for属性包含您之前声明的ReactTooltip组件的id 。

有关该库的其他选项（用于操作工具提示的位置、事件和样式）的更多信息，请参阅GitHub 存储库中的API 描述和官方网站上的其他示例。

材质用户界面

Material-UI 是受 Google 提供的Material Design启发的 React 组件组合，您可以在 React 应用中使用它。Material-UI 包含一个Tooltip组件，您可以利用它来显示工具提示。

为了使用 Material UI 显示基本的工具提示，请执行以下操作：

      import React from "react";

import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  return (
    <div className="App">
      <Tooltip
        title="Tooltip for the register button"
        placement="top"
      >
        <Button variant="contained">Register</Button>
      </Tooltip>
    </div>
  );
}
    

如上所示，首先导入按钮和工具提示组件。继续使用工具提示组件包装要显示工具提示的按钮。设置工具提示的属性；标题和位置属性分别定义要显示的文本和位置。

有关更多工具提示示例，请参阅官方网站。

引导

毫无疑问， Bootstrap是开发 Web 应用最流行的框架之一。它包含一系列组件，可让您显示覆盖层、工具提示和弹出窗口。

查看以下使用React Bootstrap显示 Bootstrap 工具提示的示例：

      import React from "react";

import "bootstrap/dist/css/bootstrap.css";

import Button from "react-bootstrap/Button";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";

export default function App() {
  const renderTooltip = props => (
    <Tooltip {...props}>Tooltip for the register button</Tooltip>
  );

  return (
    <div className="App">
      <OverlayTrigger placement="top" overlay={renderTooltip}>
        <Button>Register</Button>
      </OverlayTrigger>
    </div>
  );
}
    

首先导入Button、Tooltip和OverlayTrigger组件。不要忘记导入默认主题的 Bootstrap CSS 文件。

Bootstrap 中的Tooltip组件使用OverlayTrigger组件来定位自身，因为它默认不会定位自身。为了显示按钮的工具提示，您必须使用OverlayTrigger组件包裹按钮。使用覆盖层的placement属性来设置工具提示的位置。此外，使用overlay属性来设置您希望为工具提示呈现的内容。

您为overlay属性指定的renderTooltip函数返回带有工具提示内容的Tooltip组件。

有关更多工具提示示例，请参阅官方网站。

语义用户界面

Semantic UI是一个流行的 UI 框架，它有自己的工具提示组件，您可以在 React 应用程序中使用它。

以下是使用 Semantic UI Popup组件显示工具提示的示例：

      import React from "react";

import "semantic-ui-css/semantic.min.css";

import { Button, Popup } from "semantic-ui-react";

export default function App() {
  return (
    <div className="App">
      <Popup
        trigger={<Button>Register</Button>}
        position="top center"
      >
        Tooltip for the register button
      </Popup>
    </div>
  );
}
    

首先，导入Button和Popup组件。对于默认样式，请记住同时导入 Semantic UI semantic.min.css文件。

使用Popup组件呈现工具提示。设置触发器属性以确定要包含工具提示的组件。此外，尝试使用位置属性来设置工具提示的位置。要设置工具提示的内容，请修改Popup组件中的内容。

结论

工具提示提供了一种有效但棘手的方式来显示 UI 元素的额外内容。本指南介绍了在 React 应用中包含工具提示的四种不同方法。您可以尝试这四个库，然后选择适合您的偏好和设计的库。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

如何在 React Bootstrap 中显示工具提示

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from "react"; import ReactTooltip from "react-tooltip"; export default function App() { return ( <div className="App"> <button data-tip data-for="registerTip"> Register </button> <ReactTooltip id="registerTip" place="top" effect="solid"> Tooltip for the register button </ReactTooltip> </div> ); }

import React from "react"; import Button from "@material-ui/core/Button"; import Tooltip from "@material-ui/core/Tooltip"; export default function App() { return ( <div className="App"> <Tooltip title="Tooltip for the register button" placement="top" > <Button variant="contained">Register</Button> </Tooltip> </div> ); }

import React from "react"; import "bootstrap/dist/css/bootstrap.css"; import Button from "react-bootstrap/Button"; import OverlayTrigger from "react-bootstrap/OverlayTrigger"; import Tooltip from "react-bootstrap/Tooltip"; export default function App() { const renderTooltip = props => ( <Tooltip {...props}>Tooltip for the register button</Tooltip> ); return ( <div className="App"> <OverlayTrigger placement="top" overlay={renderTooltip}> <Button>Register</Button> </OverlayTrigger> </div> ); }

import React from "react"; import "semantic-ui-css/semantic.min.css"; import { Button, Popup } from "semantic-ui-react"; export default function App() { return ( <div className="App"> <Popup trigger={<Button>Register</Button>} position="top center" > Tooltip for the register button </Popup> </div> ); }