CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4web-applications
Miyer
Miyer

Reputation: 365

How to configure the data to Bootstrap popover?

I'm working on Google web-app (with Google sheets data)

I want to display the data on mouse hover over the button but I'm getting the data on on the button instead hover display.

Where did I go wrong?

<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 0

Views: 34

Answers (1)

Styp3r
Styp3r

Reputation: 21

div.innerHTML =  cellData;

You are setting the button HTML text as the data itself that's why it is replacing the button text with the cell data.

Upvotes: 2

Related Questions