JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<a href="#" class="song-status-link">text</a>
<div id="song-status-popover">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos in sapiente obcaecati, deserunt odit! Amet beatae voluptatibus commodi a, quia enim sint quidem voluptas ullam perspiciatis doloribus reprehenderit? Provident, asperiores.</div>

CSS

body {
  padding: 40px 20px;
}

#song-status-popover {
  display: none;
}

JavaScript

$(".song-status-link").popover({
            html: true,
            placement: 'bottom',
            content: function () {
                return $("#song-status-popover").html();
            }
});
$('html').on('click', function (e) {
if(!$(e.target).is('.song-status-link') && $(e.target).closest('.popover').length == 0) {
$(".song-status-link").popover('hide');
}
});