title: How to trigger Bootstrap popover in my react app
body: <p>In jQuery we usually trigger a popover like below :</p>
  
  <pre><code>$(".font-family").popover({ 
     html: true, 
     animation: true, 
     placement: 'auto top'
  });
  </code></pre>
  
  <p>component : </p>
  
  <pre><code>this.state.data.map((element, index) =&gt; {
              return (
                  &lt;div key={index} style={{ "fontFamily":element.value }} data-fontFamily={element.value} id={element.name} data-content={element.message}
                      ref={(ref) =&gt; this.fontFamily = ref}
                      className = ".font-family"
                      &gt;
                    {element.name}
                  &lt;/div&gt;
              );
  });
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>$(this.refs.fontFamily).popover({  
              react: true 
  }); 
  </code></pre>
  
  <p>by using this it works but I'm sick of using $ to trigger popover in react.</p>
  
  <p>note : I don't want to add extra libraries like react-bootstrap for this case and need a React-based solution.</p>
  
  <p>Any ideas would be helpful.</p>