如何在 ReactJS、JSX 中使用工具提示，而不使用 npm-module 或 react-bootstrap？答案

【问题标题】：How to use tooltip in ReactJS, in JSX, without using npm-module or react-bootstrap?如何在 ReactJS、JSX 中使用工具提示，而不使用 npm-module 或 react-bootstrap？
【发布时间】：2019-02-04 23:17:22
【问题描述】：

我在 Reactjs 项目中使用 bootstrap4，我使用 npm 安装 bootstrap4 并在 App.js 中提供模块路径链接，如

import 'bootstrap/dist/css/bootstrap.min.css';

但是在使用工具提示时，对图标使用内联样式时，我无法提供属性 data-toggle，因为它们之间存在 -，而 JSX 认为它是两个不同的组件。

我读到我们可以通过第三方模块或单独的组件提供工具提示，但我想实现内联样式。

这是它的代码。

<Link to={`contact/edit/${id}`}>
                  <i
                    className="fas fa-pencil-alt "
                    style={{
                      data-toggle="tooltip", data-placement="top", title="Tooltip-not-working!",
                      cursor: "pointer",
                      float: "right",
                      color: "green",
                      marginRight: "1rem"
                    }}
                  />
                </Link>

错误是由于没有将属性作为单个字符串给出。

my GitHub code-link.

【问题讨论】：

样式在 react js 中应该有驼峰式的属性模式

标签： reactjs css bootstrap-4

【解决方案1】：

那是因为您通过style 标记提供属性。它应该看起来像这样：

<i data-toggle="tooltip" data-placement="top" title="Tooltip-not-working!" style={{...}} />

【讨论】：

【解决方案2】：

您将属性放置在错误的位置。 style 属性应该只有像marginTop 这样的camelCase 属性，而不是margin-top。你传递给元素的其余道具应该与 html 相同。

<i data-toggle="Your Message" style={{marginTop: '5px'}} />

【讨论】：

感谢您的回答，但我使用了其他答案并忘记接受/标记为正确。你的回答也有效。赞成。+1