如何将数据配置到 Bootstrap 弹出框？答案

【问题标题】：How to configure the data to Bootstrap popover?如何将数据配置到 Bootstrap 弹出框？
【发布时间】：2021-09-14 06:42:49
【问题描述】：

我正在开发 Google 网络应用（使用 Google 表格数据）

我想在鼠标悬停在按钮上时显示数据，但我在按钮上获取数据而不是悬停显示。

我哪里做错了？

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

【问题讨论】：

标签： javascript html css bootstrap-4 web-applications

【解决方案1】：

div.innerHTML =  cellData;

您将按钮 HTML 文本设置为数据本身，这就是它用单元格数据替换按钮文本的原因。

【讨论】：

感谢您的回复，我不是编码员，您能帮我解决这里需要做的更改吗？