Bootstrap Popover with HTML

by kplcode

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<ul id="myList" class="list-unstyled">

  <li>
    <a tabindex="0" role="button" data-toggle="popover" data-trigger="click" data-popover-type="share-board" title="Share Board"><i class="fa fa-share"></i>&nbsp;Share Board</a>
  </li>
  <li>
    <a tabindex="0" role="button" data-toggle="popover" data-trigger="click" data-popover-type="add-new-board" title="New Board">
                                    <i class="fa fa-plus"></i>&nbsp;New Board</a>
  </li>
</ul>

CSS

.container {padding:20px;}
.form-control {width:120px;}
.popover {max-width:400px;}

JavaScript

const contentShare = `
        <div class='row'>
            <p><button class='btn btn-default mood-board-share-url' data-loading-text="<span><i class='fa fa-circle-o-notch fa-spin'></i></span>&nbsp;&nbsp;Generating Link"><span><i class='fa fa-clone' aria-hidden='true'></i></span>&nbsp;&nbsp;Copy Share Link</button></p>
            <p><button class='btn btn-default' id='mood-board-download' data-loading-text="<span><i class='fa fa-circle-o-notch fa-spin'></i></span>&nbsp;&nbsp;Generating Download"><span><i class='fa fa-download' aria-hidden='true'></i></span>&nbsp;&nbsp;Download</button></p>
            <p><button class="btn btn-default pinterest mood-board-share-url" data-media="" data-description="TROWBRIDGE - Moodboard" data-loading-text="<span><i class='fa fa-circle-o-notch fa-spin'></i></span>&nbsp;&nbsp;Generating Image"><span><i class='fa fa-pinterest' aria-hidden='true'></i></span>&nbsp;&nbsp;Pin Image </button></p>
            <!--<div class="hidden mood-board-share-email-wrap"><span><input class="form-control mood-board-share-email-input" type="email" name="mood-board-share-email-input" /><button class="btn btn-default mood-board-share-email" data-loading-text="<span><i class='fa fa-circle-o-notch fa-spin'></i></span>&nbsp;&nbsp;Generating Image"><span><i class='fa fa-envelope' aria-hidden='true'></i></span>&nbsp;&nbsp;Email Friend</button></div>-->
            <p><a href="" class="hidden">email</a><button class="btn btn-default mood-board-share-email" data-loading-text="<span><i class='fa fa-circle-o-notch fa-spin'></i></span>&nbsp;&nbsp;Generating Email"><span><i class='fa fa-envelope' aria-hidden='true'></i></span>&nbsp;&nbsp;Email Friend</button></p>
        </div>
    `;

const contentAddNewBoard = `
        <div class="new-board">
            <input class="new-board-input" placeholder="&nbsp;Mood board Name">
            <a id="add-new-moodboard" class="new-board-name-btn" href="#"><i class="fa fa-chevron-circle-right"></i></a>
        </div>
   ...