A little help with popovers...

I seem to be struggling to get popovers to work in my page, not sure where I'm going wrong but I'd very much appreciate some pointers.

Under "JavaScript" I added a link to https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js - I understand however that this needs to come before the bootstrap/jquery links yet it wil not let me drag it up there. As a temporary measure I manually moved it up in the exported html file - does it need to be between jquery and bootstrap or before both?

I want my popover to be on some text in a table (datatables), on the TD element I added data-toggle="popover" and title="Popover title", in my script I added the code below to initialize

$(document).ready( function () { $('#myTable').DataTable({ responsive: true, "autoWidth": false }); $(function () { $('[data-toggle="tooltip"]').tooltip(); }); } );

Am I missing something here? My goal is where I have a persons name listed in a table column the popover would show their phone number and email address - then ideally (from a phone) clicking either will either say "Call (555) 555-5555" or create a new email message (via the mail app).

A little more that may be relevant... in BS I have added a script called "js.js" under "JavaScript", when I open this in BS to edit it I have this:

console.log("Running Scripts");
$(document).ready( function () {
        responsive: true,
        "autoWidth": false
    $(function () {
} );

When I hit export I get a file called script.min.js in /assets/js which, when opened contains this:

console.log("Running Scripts"),$(document).ready(function(){$("#woTable").DataTable({responsive:!0,autoWidth:!1}),$(function(){$('[data-toggle="tooltip"]').tooltip()})});

It appears to me that my semi-colons have been replaced with commas, what could/would do that? Is it linked to the minify process? Do I need script tags in my script?

Even if I manually correct this my popovers don't appear... I have tried moving the CDN reference to the top of the list of scripts (before jQuery and bootstrap) and had to manually add the integrity and origin parameters but still no luck.

Okay, first thing's first - Bootstrap 4 includes popper.js by default, so you don't need to include it manually. Now, in your javascript - $('[data-toggle="tooltip"]').tooltip(); tries to find elements that have a data-toggle attribute set to "tooltip" but in your HTML youve added data-toggle=”popover”. They need to be the same. So you need $('[data-toggle="popover"]').tooltip(); in your JS.

One more thing - you should remove:

$(function () {

It's just a shorthand for

$(document).ready(function() {

Thank you Gabriela, it's now working, I very much appreciate it!!