Button 具有多个"；“数据切换”；

有没有办法通过“数据切换”将多个事件分配给引导控件。 例如，假设我想要一个指定了“工具提示”和“按钮”切换的按钮 对它进行修改。
已尝试数据切换=“工具提示按钮”，但只有工具提示有效

编辑：

这是很容易“变通”的

---

还没有。然而，有人建议有一天有人添加此功能

下面的bootstrap Github问题展示了一个完美的示例，说明了您的愿望。这是可能的，但在这一阶段必须编写自己的变通代码

看看…：-）

---

由于工具提示不是自动初始化的，因此您可以更改工具提示的初始化。我是这样做的：

$(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>

---

如果要添加模式和工具提示，而不添加javascript或更改工具提示功能，也可以简单地在其周围包装一个元素：

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>

盘旋我

我成功地解决了这个问题，而不需要使用下面的jQuery更改任何标记。我有一个类似的问题，我想要一个按钮上的工具提示，该按钮已经在使用数据切换模式。在这里，您需要做的就是将标题添加到按钮

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

---

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

HTML

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

---

只是为了补充@Roman Holzner答案

在我的例子中，我有一个显示工具提示的按钮，它应该保持禁用状态，直到进一步的操作。使用他的方法，即使按钮被禁用，模态也能工作，因为它的调用在按钮之外-我在一个Laravel刀片文件中，只是为了澄清：）

---

在标记上打开模式并希望显示工具提示时，如果在标记内实现工具提示，则将在标记附近显示工具提示。像这样

我建议在标记外使用div，并使用“display:inline block；”

我使用href加载模式并保留工具提示的数据切换：

<a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
>
+
</a>

由于引导强制您仅通过Javascript初始化工具提示，因此我将
数据切换=“tooltip”
（因为它没有任何用处）更改为
class=“Bootstrap tooltip”
，并使用此Javascript初始化我的工具提示：

$('.bootstrap-tooltip').tooltip();

因此，我可以自由地使用
数据切换
属性进行其他操作（例如
数据切换=“button”
）。
还有一个解决方案：

    <a data-toggle="modal" data-target="#exampleModalCenter">
      <span
        class="tags"
        data-toggle="tooltip"
        data-placement="right"
        title="Tooltip text"
      >
        Text
     </span>
   </a>


正文
使用class
有一个很好的解决方案。拉伸链接
。按钮必须具有类
。相对位置
。下面是一个完整的工作示例：

必须将工具提示添加到按钮，否则其位置将不正确


$（'[data toggle=“tooltip”]'）。tooltip（）
/*DEMO*/.btn{左边距：5rem；上面距：5rem}

点击我！
情态标题与时代；模态体

+

我也尝试过使用


HTML（ejs dianmic网页）：这是所有用户的表列表，由nodejs生成表。NODEJ提供dinamic“”。只需更改任何值，如“54”

简化为：$（'[data tooltip=“tooltip”]'）。tooltip（）；使用更新的答案非常简单，比包装好的解决方案效果更好。这个问题（以及现在这个问题中的其他解决方案）的问题是，当您单击打开模式，然后关闭它时，即使鼠标离开按钮，工具提示仍会再次显示（或保持可见）。例如，如果表中的每一行都有按钮，这会非常烦人，因为它们可能会阻止上面/下面的按钮。隐藏它的唯一方法是单击工具提示之外的某个地方。我更喜欢这种方法，而不是包装器的公认答案。它非常简单，因为它可以扩展HTML5的容量，而不会使DOM过载太多。另外，在我的案例中，包装器方法似乎不起作用，该问题（#7011）已被拒绝。这实际上是最好的方法，因为它将表示问题推迟到表示层。不过有一些区别：主（按钮）中有一个
data toggle=“tooltip”
元素将整齐地显示在该元素的外部，而如果设置在span包装器中，它将与该元素重叠。感谢您，这就是应该如何完成的-没有javascriptShort、Simple和Smart解决方案。将Span添加到锚定标记不会改变引导中的设计，因此这是同时运行模型和工具提示的完美解决方案。这对我不起作用
太好了。也添加HTML。这是最干净、最不显眼的答案
<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
    <button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
    <button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

$('button[name=delete]').attr('disabled', false);

<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
     <span class="fa fa-plus"></span>
    </a>
</div>

<a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
>
+
</a>

$('.bootstrap-tooltip').tooltip();

    <a data-toggle="modal" data-target="#exampleModalCenter">
      <span
        class="tags"
        data-toggle="tooltip"
        data-placement="right"
        title="Tooltip text"
      >
        Text
     </span>
   </a>

<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>

<span type="button" data-href='/admin/user/del/<%= user.id %>' class="item" 
 data-toggle="modal" data-target="#confirm_delete">
    <div data-toggle="tooltip" data-placement="top" title="Delete" data- 
     toggle="modal">
       <i class="zmdi zmdi-delete"></i> 
    </div>
</span>

<div class="modal fade" id="confirm_delete" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
         data-backdrop="static">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticModalLabel">Static Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
      </div>
      <div class="modal-body">
        <p> This is a static modal, backdrop click will not close it. </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <form method="POST" class="btn-ok">
            <input  type="submit" class="btn btn-danger" value="Confirm"></input>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- end modal static --> 

    $(document).ready(function(){
        $('#confirm_delete').on('show.bs.modal', function(e) {
            $(this).find('.btn-ok').attr('action', $(e.relatedTarget).data('href'));
        });
    });