Bootstrap tooltip is not working with react.js

Question

I was trying to use bootstrap tooltip on button to display complete information. But it is not working. Tooltip is not getting displayed.

Here is my react code:

<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>

I even try to include it using bootstrap's javascript method like:

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

What should I do for it? Thank you..

is it because of your placement, where it cannot be seen ? .. try changing data-placement ? .. — DTH, Oct 14 '15 at 12:03
Just ran into the same issue, fixed by using react-bootstrap tooltip component (which does a good job even if I'm not satisfied using this huge amount of code for something that simple). — Pierre vDEV, May 04 '16 at 17:02
Possible duplicate of [How do use bootstrap tooltips with React?](https://stackoverflow.com/questions/33656024/how-do-use-bootstrap-tooltips-with-react) — shaedrich, Feb 05 '18 at 19:44

score 8 · Answer 1 · answered Oct 14 '15 at 14:44

8

I can only guess without a demo that you are calling .tooltip on document ready, but before the component has actually rendered.

Try:

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 consider giving your button ref a more meaningful name than 'data'

answered Oct 14 '15 at 14:44

Dominic

62,658
20
139
163

I tried your approach but it's not working. Browser is showing tooltip but without any css like just data in rectangular box with white background and black default font text, not in a bootstrap way like black background with white text. – Swapnil Bhikule Oct 15 '15 at 06:38
@SwapnilBhikule sounds like the css isn't loaded? – Dominic Oct 15 '15 at 08:47
No. CSS is getting loaded because all other bootstrap css like navbar, divs etc are working correctly inside react. – Swapnil Bhikule Oct 15 '15 at 11:07
2

Why dont you use react-bootstrap tooltip component?? – Manish Jangir Apr 12 '16 at 03:24
I think this is a genuine clash between bootstrap tooltip and react inner workings, I am having the same problem and could not get it to work reliably (I tried exactly what @DominicTobias suggested in this answer before I found this question). I could not switch to react-bootstrap tooltip so I switched to jquery-ui tooltip since I was importing that already for other stuff in my project. – JohnIdol May 04 '16 at 21:15
1

you can also select by the data-toggle attribute: `$('[data-toggle="tooltip"]').tooltip();` as described in the Bootstrap documentation [here](http://getbootstrap.com/javascript/#tooltips) – devonj Jun 13 '17 at 23:08
@ManishJangir I think because event after 1.5 year - it still in active development, so... – Klimenko Kirill Feb 02 '18 at 14:27

score 0 · Answer 2 · answered Jul 24 '18 at 08:09

0

Try to use this:

data-html="true"

inside the button tag.

It's a property which shows HTML as text.

answered Jul 24 '18 at 08:09

Ali Waheed

41
7

Chamod Pathirana · Answer 3 · 2019-09-05T04:34:27.060

0

1.import Jquery first.

const $ = window.$;

2.Call componentDidMount function.

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

3.Use the following properties

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

edited Sep 05 '19 at 04:34

answered Aug 07 '19 at 08:56

Chamod Pathirana

713
8
16

score 0 · Answer 4 · answered Sep 11 '19 at 07:37

@Swapnil I too had the same problem got the tooltip but without css, then found that have to initialize tooltip so I did like this

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..

score 0 · Answer 5 · answered Apr 13 '20 at 17:49

Import jQuery in 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);
}

and add window.$ to a const function,

const $ = () => window.$;

and then you can use tooltip like,

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

score 0 · Answer 6 · answered Sep 28 '21 at 12:03

I was trying to use bootstrap5's tooltips in one of my react.js project and getting suffer to implement it. Then, I have found a solution that helped me. Let me tell how I solved it.

For Functional Component

First I have installed the bootstrap into my project by yarn add bootstrap and then added popper by yarn add @popperjs/core.
Then imported import { Tooltip } from "bootstrap"; in app.js file.
Then created an useEffect and added this code inside it.

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

Hope it will help you to get rid of the issue.

Bootstrap tooltip is not working with react.js

6 Answers6