javascript - 复选框上的 Bootstrap Popover

Question

可能这道题已经有人做过了，但是目前我没有找到任何东西。是否可以在复选框上使用 Bootstrap Popover(例如，当我单击复选框时)。

我在表格中有一个复选框列表:

<input class="css-checkbox selectBox" data-trigger="hover" data-content="Display devices here" id="deviceCompareBox_{tmpl_var name='id'}"  type="checkbox" value="{tmpl_var name='id'}" >

以及初始化它的相关方法:

$('.selectBox').popover();

但它不适用于 input 元素。当然，它使用 <a>。元素。有什么办法可以解决吗？

Answer 1

您可以做的是将 input 包装在 div 中，并为 div 提供弹出功能。您还需要将包装器 div 的高度和宽度设置为复选框的高度和宽度，如下所示:

HTML:

<div class="checkbox-wrapper" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">
    <input type="checkbox">
</div>

CSS:

.checkbox-wrapper {
    height: 13px;
    width: 13px;
}

jQuery:

$(document).ready(function() {
  $('.checkbox-wrapper').popover();
})