note-popover appearing in top left on page load

Sorry if this is user error, but I have read through the documentation.

I have summernote included in a project and initialized on a page. The editor works fine.

The only problem is that I have one (sometimes two) popovers showing in the top right of the page every time the page loads (see screenshot).

The code to initialize is simply

$('#pqqinsurance').summernote({ height: 150, placeholder: 'Enter insurance information here...', });

so I’m unsure why it is appearing. The following html is added to the bottom of my page…

<div class="note-popover popover in note-link-popover bottom"> <div class="arrow"></div> <div class="popover-content note-children-container"><span><a target="_blank"></a>&nbsp;</span><div class="note-btn-group btn-group note-link"><button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="Edit"><i class="note-icon-link"></i></button><button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="Unlink"><i class="note-icon-chain-broken"></i></button></div></div></div> and <div class="note-popover popover in note-image-popover bottom"> <div class="arrow"></div> <div class="popover-content note-children-container"><div class="note-btn-group btn-group note-imagesize"><button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="Resize Full"><span class="note-fontsize-10">100%</span></button><button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="Resize Half"><span class="note-fontsize-10">50%</span></button><button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="Resize Quarter"><span class="note-fontsize-10">25%</span></button></div><div class="note-btn-group btn-group note-float"><button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="Float Left"><i class="note-icon-align-left"></i></button><button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="Float Right"><i class="note-icon-align-right"></i></button><button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="Float None"><i class="note-icon-align-justify"></i></button></div><div class="note-btn-group btn-group note-remove"><button type="button" class="note-btn btn btn-default btn-sm" tabindex="-1" title="" data-original-title="Remove Image"><i class="note-icon-trash"></i></button></div></div></div>

Any help would be very much appreciated!

[marquez20]

$(‘.summernote’).summernote({ height: 300, popover: { image: [], link: [], air: [] } });

[emmanuelstroem]

i had the same issue with bootstrap 4. used summernote-bs4.css and summernote-bs4.js it works now.