如何在ReactJS和JSX中使用工具提示，而不使用npm模块或react引导？

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

导入'bootstrap/dist/css/bootstrap.min.css'

但是，在使用工具提示、对图标使用内联样式时，我无法提供属性数据切换，因为它们之间存在-in，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>

错误是由于未将属性作为单个字符串提供

---

这是因为您通过样式标记提供属性。 它应该是这样的：

---

您将属性放置在错误的位置。style属性应该只有camelCase属性，如marginTop，而不是marginTop。您传递给元素的其他道具应该和html相同

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

---

样式中应该有属性的驼峰大小写模式，谢谢您的回答，但我使用了其他答案，忘记了接受/标记为正确。你的答案也适用。向上投票。+1