JSFiddle - React, Tailwind, and code Playground

by Michael Hughes

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
     <h1>a heading</h1>

    <p>Some other text here&nbsp;<span data-toggle="popover" style="cursor: pointer" data-content="Some helpful text" class="glyphicon glyphicon-question-sign"></span>

    </p>
</body>

CSS

.close-me {
    float: right;
}
.popover-title {
    background-color: transparent;
    border: none;
}

JavaScript

$(document).ready(function () {
    $('[data-toggle="popover"]').popover({
        placement: "top",
        html: true,
        trigger: "hover focus",
        title: "<span class='glyphicon glyphicon-remove-sign close-me'></span>"

    });
    $('[data-toggle="popover"]').on('shown.bs.popover', function () {
        $('.popover-title .close-me').on('click', function (e) {
            $('[data-toggle="popover"]').popover('hide');
        });
    });
});