How to trigger Bootstrap popover in my react app

Question

In jQuery we usually trigger a popover like below :

$(".font-family").popover({ 
   html: true, 
   animation: true, 
   placement: 'auto top'
});

component :

this.state.data.map((element, index) => {
            return (
                <div key={index} style={{ "fontFamily":element.value }} data-fontFamily={element.value} id={element.name} data-content={element.message}
                    ref={(ref) => this.fontFamily = ref}
                    className = ".font-family"
                    >
                  {element.name}
                </div>
            );
});

but I want to implement it in react, I know call those codes in ComponentDidMount() will work, but I want to do it in react way.

$(this.refs.fontFamily).popover({  
            react: true 
});

by using this it works but I'm sick of using $ to trigger popover in react.

note : I don't want to add extra libraries like react-bootstrap for this case and need a React-based solution.

Any ideas would be helpful.

Balaji731 · Accepted Answer · 2019-01-09T06:43:10.167

1

Solution is using React with jquery to trigger bootstrap popover or can use React-bootstrap popover.

Check the demo link

We can use ReactDOM.createPortal in react new version(16.5).

edited Jan 09 '19 at 06:43

answered Sep 05 '18 at 05:59

Balaji731

1,079
1
10
15

I guess it should be something like this setTimeout(() => { $('[data-toggle="popover"]').popover(); }, 0) – Lasantha Basnayake Mar 10 '20 at 16:57

score 1 · Answer 2 · answered Sep 05 '18 at 21:22

Basically two steps to have a popover with Bootstrap:

Render an element with popover properties, data-toggle="popover", title, and data-content
Enable popovers via JavaScript

In React, render() for step 1 and componentDidMount() for step 2

For example:

import React, { Component } from 'react';

export default class App extends Component {
  componentDidMount() {
    // Suppose you have already included bootstrap required JS files
    window.jQuery('#popoverExample').popover();
  }

  render() {
    return (
      <button
        id="popoverExample"
        type="button"
        className="btn btn-lg btn-danger"
        data-toggle="popover"
        title="Popover title"
        data-content="And here's some amazing content. It's very engaging. Right?">
        Click to toggle popover
      </button>
    )
  }
}

Here is one simple way by using a library. It essentially does the above for you. Not really needed if you don't want the library.

How to trigger Bootstrap popover in my react app

2 Answers2