I am currently working on a Google web app that involves Google Sheets data.
My objective is to have the data displayed when hovering over a button, but instead, the data appears directly on the button without the hover display.
What might I have done incorrectly?
<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e150b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<script>
function onSuccess(cellData) {
var div = document.getElementById('output');
div.innerHTML = cellData;
}
google.script.run.withSuccessHandler(onSuccess)
.callMe();
</script>
<script>
$(document).ready(function(){
$('[data-bs-toggle="popover"]').popover();
});
</script>
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="output">
<button class="btn btn-primary" id="output" type="button" disabled>info</button>
</span>