具有多个"数据切换"的Bootstrap控件

Question

有没有办法通过"data-toggle"为引导控件分配多个事件.例如,假设我想要一个分配了"工具提示"和"按钮"切换按钮的按钮.
尝试data-toggle ="工具提示按钮",但只有工具提示有效.

编辑:

这很容易"可以解决"

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

Answer 1

如果要添加模态和工具提示而不添加javascript或更改工具提示功能,您还可以简单地在其周围包装元素:

<span data-toggle="modal" data-target="#id">
    <a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>
</span>

这实际上是最好的方法,因为它将表示的关注推迟到表示层. (5认同)
但是有一些区别:main(button)元素中的`data-toggle ="tooltip"`将整齐地显示在该元素之外,而如果设置在span包装内,它将与该元素重叠. (3认同)
谢谢，这是应该如何完成的 - 没有 javascript (2认同)

Answer 2

由于工具提示未自动初始化,您可以在工具提示的初始化中进行更改.我是这样做的:

$(document).ready(function() {
    $('body').tooltip({
        selector: "[data-tooltip=tooltip]",
        container: "body"
    });
});

使用此标记:

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

请注意data-tooltip.

更新

或简单地说,

$('[data-tooltip="tooltip"]').tooltip();

用以下内容简化:$('[data-tooltip ="tooltip"]').tooltip(); (10认同)
使用您更新的答案,非常简单,完美 (3认同)
这个问题（以及现在这个问题中的其他解决方案）是，当您单击打开模态，然后关闭它时，即使鼠标已离开按钮，工具提示也会再次显示（或保持可见）。如果您在表格中的每一行都有按钮，这会很烦人，因为它们可能会挡住上方/下方的按钮。隐藏它的唯一方法是单击工具提示之外的某处。 (2认同)

Answer 3

我设法解决了这个问题,而无需使用以下jQuery更改任何标记.我有一个类似的问题,我想要一个按钮上的工具提示,该按钮已经为模态使用数据切换.您需要在此处执行的操作是将标题添加到按钮.

$('[data-toggle="modal"][title]').tooltip();

Answer 4

还没.但是,有人建议有人有一天添加此功能.

以下引导程序Github问题显示了您希望的完美示例.有可能 - 但不是没有在此阶段编写自己的变通方法代码.

看看这个... :-)

Answer 5

这是我刚刚实施的最佳解决方案:

HTML

<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>

无论你使用什么方法,你无论如何都需要包含JAVASCRIPT .

$('[rel="tooltip"]').tooltip();