JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<a href="#" id="wToggle">with toggle</a><br>
<a href="#" id="wShow">with show</a><br><br>
<h3 id="on-h3">Simple popover with just a toggle switch</h3>
<a href="#" id="h3-toggle">toggle h3</a>

CSS

body {text-align:center; margin-top:50px;}

JavaScript

$(function(){
    $('#wShow').popover({
        html:true,
        title: 'title',
        content: 'content<br>here',
        trigger: 'manual'       
    }).on('click', function(){
        $(this).popover('show')
    })
    $('#wToggle').popover({
        html:true,
        title: 'title',
        content: 'content<br>here',
        trigger: 'manual'        
    }).on('click', function(){
        $(this).popover('toggle')
    })
            
    $('#on-h3').popover({
            title: 'my title',
            content: 'the content',
            trigger: 'manual',
            placement: 'top'
    })
    $('#h3-toggle').on('click', function(){
          // change toggle to show and it works
          $('#on-h3').popover('toggle')
    })
})