javascript - Bootstrap弹出插件不起作用

Question

我正在尝试使用Twitter Bootstrap 弹出框插件<span>在单击元素时弹出一个弹出框。

所有文件都包含在页面上，包括bootstrap-tooltip.js和bootstrap-popover.js. 这是我调用弹出框的 jQuery 代码：

$('#supported-hosts').popover({
    'animation': true,
    'html': 'test',
    'trigger': 'click'
});

但是，当我单击该元素时，什么也没有发生。开发人员控制台或其他任何内容中都没有 Javascript 错误。

我也试过这样做没有效果：

$('#supported-hosts').on('click', function() {
    $(this).popover('show');
});

我对出了什么问题一无所知，因为据我从 Bootstrap 文档中可以看出我正在正确使用它。

编辑：HTML 也只是一个 span 元素：

<span id="supported-hosts">Supported filehosts</span>

score 0 · Accepted Answer

为了显示一个弹出窗口，您需要指出它的内容应该是什么。

您可以在 html 标记本身上执行此操作：

<span id="supported-hosts" data-content="Popover content">Supported filehosts</span>

或者使用 JavaScript：

$('#supported-hosts').popover({
    'content': 'Popover content'
    'animation': true,
    'html': 'test',
    'trigger': 'click'
});

默认情况下，弹出框将使用title触发它的元素的属性，因此您也可以根据需要使用它。

1 回答 1