JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<p>This popover won't hide unless you click the button again.</p>
<button class="btn btn-primary" data-container="body" data-toggle="popover" data-placement="bottom" data-animation="false">
Add Dashboard
</button>
<hr/>
<p>This popover hides if you click anywhere after the popover opens, but I don't want it to hide if I click the input or the Create button</p>
<button class="btn btn-primary" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-animation="false">
Add Dashboard
</button>

JavaScript

$('button').popover({
    html: true,
    content: '<div class="input-group">'+
              '<input id="new_input" type="text" placeholder="My Dashboard" class="form-control">'+
              '<span class="input-group-btn">'+
                '<button class="btn btn-success btn-default" type="button">Create</button>'+
              '</span>'+
        '</div>'
    });