Question

当鼠标悬停并点击时，我遇到了一个打开popver模式按钮的问题。

<button type="button" 
        class="btn btn-success btn-lg" 
        data-target="#addChangeModal" 
        data-toggle="####" 
        data-toggle="" 
        data-content="Add change">
</button>`

当我将数据切换设置为

时

data-toggle="modal"

或

data-toggle="popover"

值模态和 popover 都能完美运行。

但是我无法设置

data-toggle="modal popover"

Answer 1

Devs of Bootstrap的官方答案：

不要在同一元素上使用多个插件的数据属性。例如，按钮不能同时具有工具提示并切换模态。为此，请使用包装元素。

这方面的一个例子是：

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
  <span data-toggle="tooltip" title="Tooltip Message">Data<span>
</a>

信用到：Bootstrap: Collapse and Tooltip together

Answer 2

使用jQuery启动你的模态：

$('#my-btn').click(function () {
     $('#addChangeModal').modal('show');  
     $('[data-toggle=popover]').popover('hide'); //EDIT: added this line to hide popover on button click.
});

然后使用Bootstrap中的标准弹出框，包括data-trigger="hover"以显示悬停时的弹出窗口。

<button id="my-btn" type="button" class="btn btn-success btn-lg" data-trigger="hover" data-original-title="Popover Title" data-content="Popover content" data-toggle="popover"></button>

在数据切换中设置两个元素，模态和弹出

2 个答案:

Bootply Demo