twitter-bootstrap 如何在 React 中使用引导工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33656024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do use bootstrap tooltips with React?
提问by Ryan Peschel
I had tooltips working earlier and am trying to migrate my component to React. I'm not using react-bootstrap yet because I'm not sure if I'm going to because it's still under heavy development and not 1.0 yet.
我之前有工具提示，并且正在尝试将我的组件迁移到 React。我还没有使用 react-bootstrap，因为我不确定我是否会使用它，因为它仍在大力开发中，而不是 1.0。
Here's a snippet of what my render code looks like:
这是我的渲染代码的片段：
<span>
<input data-toggle="tooltip" ref="test" title={this.props.tooltip} type="radio" name="rGroup" id={"r" + this.props.name} />
<label className="btn btn-default" htmlFor={"r" + this.props.name}></label>
</span>
And calling it:
并称之为：
<MyComponent name="apple" tooltip="banana" />
I know you have to call the tooltip function to get it to show up and I think that's where I'm messing up. I'm currently trying something like this:
我知道你必须调用工具提示函数才能让它显示出来，我认为这就是我搞砸的地方。我目前正在尝试这样的事情：
componentDidMount() {
$(this.refs.test).tooltip();
// this.refs.test.tooltip(); ?
// $('[data-toggle="tooltip"]').tooltip(); ?
}
But none of this seems to be working. The tooltip isn't showing up.
但这些似乎都不起作用。工具提示没有显示。
采纳答案by Ryan Peschel
I found out the problem. I was putting the data-toggleand titleon the wrong element (it should go on the label instead). Also, $(this.refs.test).tooltip();works fine.
我发现了问题所在。我把data-toggle和title放在错误的元素上（它应该放在标签上）。此外，$(this.refs.test).tooltip();工作正常。
回答by devonj
Without using refs / React DOM, you can select tooltips by data-toggle attribute:
在不使用 refs / React DOM 的情况下，您可以通过 data-toggle 属性选择工具提示：
componentDidMount() {
$('[data-toggle="tooltip"]').tooltip();
}
componentDidUpdate() {
$('[data-toggle="tooltip"]').tooltip();
}
Source: Bootstrap documentation
来源：Bootstrap 文档
Note, if you're loading jQuery by CDN, you can refer to it by window.$ as well.
请注意，如果您通过 CDN 加载 jQuery，您也可以通过 window.$ 引用它。
回答by Guillaume Harari
I know it s an old question, but to avoid side effects with bootstrap/jquery/react, if you want tooltips, use this :
我知道这是一个老问题，但为了避免 bootstrap/jquery/react 的副作用，如果你想要工具提示，请使用这个：
https://www.npmjs.com/package/react-tooltip
https://www.npmjs.com/package/react-tooltip
It's very easy to use and works better than bootstrap tooltip in a react project
它非常易于使用并且比反应项目中的引导工具提示更有效
回答by shaedrich
It would be better if you use real React components because React only writes to the DOM so it cannot recognize any changes made my others which could clash with.
如果您使用真正的 React 组件会更好，因为 React 只写入 DOM，因此它无法识别我的其他组件所做的任何可能与之冲突的更改。
https://github.com/react-bootstrap/react-bootstrap
https://github.com/react-bootstrap/react-bootstrap
const tooltip = (
<Tooltip id="tooltip">
<strong>Holy guacamole!</strong> Check this info.
</Tooltip>
);
const overlay = (
<OverlayTrigger placement="left" overlay={tooltip}>
<Button bsStyle="default">Holy guacamole!</Button>
</OverlayTrigger>
);
(Example taken from https://react-bootstrap.github.io/components/tooltips/)
（示例取自https://react-bootstrap.github.io/components/tooltips/）
回答by webdeb
you need to get the real DOM representation, try this please:
您需要获得真正的 DOM 表示，请尝试以下操作：
12.x
12.x
$(this.refs.test.getDOMNode()).tooltip();
13.x
13.x
$(React.findDOMNode(this.refs.test)).tooltip();
14.x
14.x
var ReactDom = require('react-dom');
$(ReactDom.findDOMNode(this.refs.test)).tooltip();
