twitter-bootstrap 具有多个“数据切换”的引导控制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16402390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap control with multiple "data-toggle"
提问by LastTribunal
Is there a way to assign more than one event to a bootstrap control via "data-toggle".
For example, lets say I want a button that has a "tooltip" and a "button" toggle assigned
to it.
Tried data-toggle="tooltip button", but only the tooltip worked.
有没有办法通过“数据切换”将多个事件分配给引导程序控件。例如，假设我想要一个分配有“工具提示”和“按钮”切换的按钮。
试过 data-toggle="tooltip button"，但只有工具提示有效。
EDIT:
编辑：
This is easily "workaroundable" with
这很容易“解决”
$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
回答by Roman Holzner
If you want to add a modal and a tooltipwithout adding javascript or altering the tooltip function, you could also simply wrap an element around it:
如果您想在不添加 javascript 或更改工具提示功能的情况下添加模态和工具提示，您也可以简单地在其周围包裹一个元素：
<span data-toggle="modal" data-target="modal">
<a data-toggle="tooltip" data-placement="top" title="Tooltip">
Hover Me
</a>
</span>
回答by Melvin
Since tooltip is not initialized automatically, you can make changes in your initialization of the tooltip. I did mine like this:
由于工具提示不会自动初始化，您可以在工具提示的初始化中进行更改。我是这样做的：
$(document).ready(function() {
$('body').tooltip({
selector: "[data-tooltip=tooltip]",
container: "body"
});
});
with this markup:
使用此标记：
<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>
Notice the data-tooltip.
请注意data-tooltip.
Update
更新
Or simply,
或者简单地说，
$('[data-tooltip="tooltip"]').tooltip();
回答by James Parker
I managed to solve this issue without the need to change any markup with the following piece of jQuery. I had a similar problem where I wanted a tooltip on a button that was already using data-toggle for a modal. All you will need to do here is add the title to the button.
我设法解决了这个问题，而无需使用以下 jQuery 更改任何标记。我有一个类似的问题，我想要一个按钮上的工具提示，该按钮已经将数据切换用于模式。您需要在这里做的就是为按钮添加标题。
$('[data-toggle="modal"][title]').tooltip();
回答by Jacques Koekemoer
This is the best solution that I just implemented:
这是我刚刚实施的最佳解决方案：
HTML
HTML
<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>
JAVASCRIPTthat you anyway need to include regardless of what method you use.
无论您使用什么方法，您都需要包含JAVASCRIPT 。
$('[rel="tooltip"]').tooltip();
回答by obrientimothya
Not yet. However, it has been suggested that someone add this feature one day.
还没有。但是，有人建议有一天有人添加此功能。
The following bootstrap Github issue shows a perfect example of what you are wishing for. It is possible- but not without writing your own workaround code at this stage though.
以下引导 Github 问题展示了您所希望的完美示例。这是可能的 - 但在这个阶段，如果没有编写您自己的解决方法代码。
Check it out... :-)
看看这个... ：-）
回答by Shadi Namrouti
I use href to load the modal and leave data-toggle for the tooltip:
我使用 href 加载模态并为工具提示保留数据切换：
<a
data-toggle="tooltip"
data-placement="top"
title="My Tooltip text!"
href="javascript:$('#id').modal('show');"
>
+
</a>
回答by ankabot
Since Bootstrap forces you to initialize tooltips only through Javascript, I changed data-toggle="tooltip"(since it's useless then) to class="bootstrap-tooltip"and used this Javascript to initialize my tooltips:
由于 Bootstrap 强制您仅通过 Javascript 初始化工具提示，因此我更改了data-toggle="tooltip"（因为它当时没用）class="bootstrap-tooltip"并使用此 Javascript 来初始化我的工具提示：
$('.bootstrap-tooltip').tooltip();
And so I was free to use the data-toggleattribute for something else (e.g. data-toggle="button").
所以我可以自由地将该data-toggle属性用于其他用途（例如data-toggle="button"）。
回答by Hymankobec
One more solution:
另一种解决方案：
<a data-toggle="modal" data-target="#exampleModalCenter">
<span
class="tags"
data-toggle="tooltip"
data-placement="right"
title="Tooltip text"
>
Text
</span>
</a>
回答by Jakub Muda
There is a nice solution using class .stretched-link. Button must have a class .position-relative. Here is a full working example:
使用 class 有一个很好的解决方案.stretched-link。按钮必须有一个类.position-relative。这是一个完整的工作示例：
Tooltip must be added to the button otherwise its position will be incorrect.
必须将工具提示添加到按钮，否则其位置将不正确。
$('[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">×</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>回答by Thiago Cardoso
Just for complement @Roman Holzner answer...
只是为了补充@Roman Holzner 的回答...
In my case, I have a button that shows the tooltip and it should remain disabled until furthermore actions. Using his approach, the modal works even if the button is disabled, because its call is outside the button - I'm in a Laravel blade file, just to be clear :)
就我而言，我有一个显示工具提示的按钮，它应该保持禁用状态，直到进一步操作。使用他的方法，即使按钮被禁用，模态也能工作，因为它的调用在按钮之外 - 我在 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>
So if you want to show the modal only when the button is active, you should change the order of the tags:
因此，如果您只想在按钮处于活动状态时显示模态，您应该更改标签的顺序：
<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>
If you want to test it out, change the attribute with a JQuery code:
如果您想对其进行测试，请使用 JQuery 代码更改该属性：
$('button[name=delete]').attr('disabled', false);
