// Initialize popover
$('body').popover({
    html: true,
    template:
        '<div class="popover popover-row-field" role="tooltip">' +
        '<div class="arrow"></div>' +
        '<button type="button" class="btn-popover-header btn-edit-popover-close float-right text-primary" aria-label="Close">' +
        '<i class="fal fa-check"></i>' +
        '</button>' +
        '<button type="button" data-action="undo" class="btn-popover-header action-button text-primary float-right">' +
        '<i class="fal fa-undo"></i>' +
        '</button>' +
        '<h3 class="popover-header"></h3>' +
        '<div class="popover-body"></div>' +
        '</div>',
    placement: 'bottom',
    trigger:'click',
    position: 'relative',
    selector: '.btn-edit-cell',
});

// Close popover by clicking the X
$(document).on('click', '.btn-edit-popover-close', function() {
    $('.btn-edit-cell').popover('hide').popover();
});

<td class="field-editor-input align-top">
    <button type="button" class="btn-popover-header text-light btn-edit-cell save-btn-group" data-link="{{ $col->header }}-new"
            data-html="true" title="{{ pretty_heading($col->header) }}" data-row-id="#row-template-new"
            data-content="<textarea id='text-{{ $col->header }}-new' name='{{ $col->header }}' class='form-control popover-edit-field'></textarea>">
        <i class="fal fa-pen text-light"> </i>
    </button>
    <div id="div-{{ $col->header }}-new" data-orig=""></div>
</td>