Question

我试图在按钮上使用bootstrap工具提示来显示完整的信息。但它没有用。工具提示未显示。

这是我的反应代码：

<button type="button" ref="data" value={this.props.data} onClick={this.submit} className="btn btn-default btn-block" data-toggle="tooltip" data-placement="top" title={ this.props.data }>
{ this.props.data.length > 20 ?
this.props.data.substring(0, 20)+'...' : this.props.data }
</button>

我甚至尝试使用bootstrap的javascript方法来包含它，如：

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})
</script>

我该怎么做？谢谢..

Answer 1

我只能在没有演示的情况下猜测您在文档就绪时调用了<?php ?>，但是在组件实际渲染之前。

尝试：

.tooltip

PS考虑给你的按钮引用一个比'data'更有意义的名字

Answer 2

尝试使用此功能：

data-html="true"

按钮标签内。

这是一个将HTML显示为文本的属性。

Answer 3

1。首先导入Jquery。

const $ = window。$;

2。调用componentDidMount函数。

componentDidMount() {
 $('[data-toggle="tooltip"]').tooltip();  
}
componentDidUpdate() {
 $('[data-toggle="tooltip"]').tooltip();
}

3。使用以下属性

 data-toggle="tooltip"
 title="Main PDF"

Answer 4

@Swapnil我也遇到了同样的问题，但是没有CSS，但是发现必须初始化工具提示，所以我确实这样做

componentDidMount() {
   window.$(this.refs.test).tooltip();
}
In my textbox, I have reference attribute like ref='test' and initialized tooltip..viola It worked for me.. Hope it helps u..

Answer 5

在 componentDidMount（）中导入jQuery，

componentDidMount() {
    const script = document.createElement('script');
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js';
    script.async = true;
    document.body.appendChild(script);
}

并将 window。$ 添加到const函数，

const $ = () => window.$;

然后您可以使用类似的工具提示

$(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

Bootstrap工具提示不能与react.js一起使用

5 个答案: