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

还没有。但是，有人建议某天有人添加这个特性。

下面的引导 Github 问题展示了一个完美的例子，您希望什么。这是有可能的——但是在这个阶段必须编写自己的解决方案代码。

看看... -)

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

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

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

如果你想在不添加 javascript 或修改工具提示函数的情况下添加一个 模式和工具提示，你也可以简单地在它周围包装一个元素:

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

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

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

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

超文本标示语言

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

JAVASCRIPT < em > ，无论您使用什么方法都需要包含它。

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

作为补充@Roman Holzner 的回答..。

在我的例子中，我有一个显示工具提示的按钮，在进一步操作之前它应该保持禁用状态。使用他的方法，即使按钮被禁用，模式仍然可以工作，因为它的调用在按钮之外-我在 Laravel Blade 文件中，只是为了清楚:)

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

当你在标签上打开模式并且想要显示工具提示时，如果你在标签里面实现了工具提示，它会显示附近的标签。像这样

我建议在标记之外使用 div，并使用 “显示: 内联块;”

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

我使用 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")。

还有一个办法:

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

有一个很好的解决方案使用类 .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>

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

我也试过用

<span></span>

but

<a></a>

给你:

<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
<a data-bs-toggle="tooltip" title="Example">Some info here</a>
</button>

更好的方法是，尝试用 div 包装整个按钮(使用 popover) :

<div data-bs-toggle="tooltip" title="Something">
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
Button label
</button>
</div>

HTML (ejs dianmic web page) : 这是一个包含所有用户的表格列表，由 nodejs 生成表格。NodeJS 提供动态的“ <% = user.id% >”。改变任何值，比如“54”

<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'));
});
});