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

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

编辑:

这很容易"可以解决"

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

Roman Holzne.. 298

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

    +

这实际上是最好的方法,因为它将表示的关注推迟到表示层. (5认同)

但是有一些区别:main(button)元素中的`data-toggle ="tooltip"`将整齐地显示在该元素之外,而如果设置在span包装内,它将与该元素重叠. (3认同)

---

Melvin.. 67

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

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

使用此标记:

Text here

请注意data-tooltip.

更新

或简单地说,

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

用以下内容简化:$('[data-tooltip ="tooltip"]').tooltip(); (10认同)

使用您更新的答案,非常简单,完美 (3认同)

---

小智.. 9

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

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

---

小智.. 8

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

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

看看这个... :-)

https://github.com/twitter/bootstrap/issues/7011

1> Roman Holzne..：

---

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

    +

---

这实际上是最好的方法,因为它将表示的关注推迟到表示层.

---

但是有一些区别:main(button)元素中的`data-toggle ="tooltip"`将整齐地显示在该元素之外,而如果设置在span包装内,它将与该元素重叠.

2> Melvin..：

---

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

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

使用此标记:

Text here

请注意data-tooltip.

更新

或简单地说,

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

---

用以下内容简化:$('[data-tooltip ="tooltip"]').tooltip();

---

使用您更新的答案,非常简单,完美

3> 小智..：

---

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

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

4> 小智..：

---

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

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

看看这个... :-)

https://github.com/twitter/bootstrap/issues/7011

5> Jacques Koek..：

---

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

HTML

Hover over me

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

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