[英]How do use bootstrap tooltips with React?
I had tooltips working earlier and am trying to migrate my component to React. 我的工具提示工作较早,我正在尝试将我的组件迁移到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-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. 工具提示未显示。
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,您可以通过窗口引用它。$。
I found out the problem. 我发现了问题。 I was putting the data-toggle
and title
on the wrong element (it should go on the label instead). 我把data-toggle
和title
放在错误的元素上(它应该放在标签上)。 Also, $(this.refs.test).tooltip();
另外, $(this.refs.test).tooltip();
works fine. 工作良好。
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 它比反应项目中的bootstrap工具提示更易于使用和工作
you need to get the real DOM representation, try this please: 你需要得到真正的DOM表示,请试试这个:
$(this.refs.test.getDOMNode()).tooltip();
$(React.findDOMNode(this.refs.test)).tooltip();
var ReactDom = require('react-dom');
$(ReactDom.findDOMNode(this.refs.test)).tooltip();
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/ )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.