具有多个“数据切换”的引导程序控制

有没有一种方法可以通过“数据切换”为引导程序控件分配多个事件。例如，假设我想要一个分配了“工具提示”和“按钮”切换开关的按钮。
尝试使用data-toggle =“ tooltip button”，但只有工具提示有效。

编辑：

这很容易“解决”

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

如果您想添加模式和工具提示而不添加JavaScript或更改工具提示功能，则还可以将元素包装起来：

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

由于工具提示不会自动初始化，因此您可以在工具提示的初始化中进行更改。我确实是这样的：

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

我设法解决了这个问题，而无需使用以下jQuery更改任何标记。我有一个类似的问题，我想在按钮上使用工具提示，而该工具提示已经在使用数据切换模式。您只需要在按钮上添加标题即可。

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

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

的HTML

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

无论使用哪种方法，无论如何都需要包括JAVASCRIPT 。

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

还没。但是，建议某人一天添加此功能。

以下引导Github问题显示了您想要的完美示例。这是可能的，但是在当前阶段并非没有编写自己的解决方法代码。

看看这个... ：-）

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

我使用href加载模式并保留数据提示作为工具提示：

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

由于Bootstrap强迫您仅通过Javascript初始化工具提示，因此我更改为data-toggle="tooltip"（因为它没有用），class="bootstrap-tooltip"并使用此Javascript初始化了我的工具提示：

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

因此，我可以随意将data-toggle属性用于其他用途（例如data-toggle="button"）。

只是为了补充@Roman Holzner回答...

就我而言，我有一个显示工具提示的按钮，应该保持禁用状态，直到进一步操作为止。使用他的方法，即使按钮被禁用，模态也可以工作，因为它的调用位于按钮外部-我在Laravel刀片文件中，只是要清楚:)

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

如果要对其进行测试，请使用JQuery代码更改属性：

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

另一种解决方案：

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

有一个很好的解决方案使用class .stretched-link。按钮必须有一个类.position-relative。这是一个完整的工作示例：

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

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

/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
    <span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
    Click Me!
</button>

<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">Modal body</div></div></div></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

当在标签上打开模态并想要显示工具提示时，如果在标签内实现工具提示，它将在工具标签附近显示工具提示。像这样

我建议在标签外使用div并使用“ display：inline-block;”

<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!">+</a>