引导工具提示不能与react.js一起工作

Question

我试图在按钮上使用引导工具提示来显示完整的信息。但这并没有奏效。没有显示工具提示

下面是我的react代码:

<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

我只能在没有演示的情况下猜测，您在文档准备就绪时调用.tooltip，但在组件实际呈现之前。

试题:

componentDidMount: function() {
  this.attachTooltip();
},
componentDidUpdate: function() {
  this.attachTooltip();
},
attachTooltip: function() {
  $(this.refs.data).tooltip();
  // Or for React <0.14 -
  // $(this.refs.data.getDOMNode()).tooltip();
}

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

Answer 2

试着用这个:

data-html="true"

在按钮标签内

Answer 3

1。

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

导入jQuery在componentDidMount()，

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);
}

和添加窗口。$转换为const函数，

const $ = () => window.$;

然后你可以使用工具提示，比如

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

Answer 6

我试图在我的一个react.js项目中使用bootstrap5的工具提示，并且很难实现它。然后，我找到了一个帮助我的解决方案。我来告诉你我是怎么解决的。

功能组件

1. 首先，我安装了bootstrap到我的项目yarn add bootstrap，然后添加了popper的yarn add @popperjs/core。
2. 在app.js文件中导入import { Tooltip } from "bootstrap";。
3. 然后创建一个useEffect并将此代码添加到其中。

    var tooltipTriggerList = [].slice.call(
      document.querySelectorAll('[data-bs-toggle="tooltip"]')
    );
    tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new Tooltip(tooltipTriggerEl);
    });

希望它能帮助你解决这个问题。