button - 具有多个“数据切换”的引导控制

Question

有没有办法通过“数据切换”将多个事件分配给引导控件。例如，假设我想要一个分配有“工具提示”和“按钮”切换的按钮。
尝试了 data-toggle="tooltip button"，但只有工具提示有效。

编辑：

这很容易“解决”

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

Answer 1

如果您想在不添加 javascript 或更改工具提示功能的情况下添加模式和工具提示，您也可以简单地在其周围包裹一个元素：

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

HTML

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

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

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

Answer 5

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

以下引导 Github 问题显示了您所希望的完美示例。这是可能的——但在这个阶段你必须编写自己的解决方法代码。

一探究竟... ：-）

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

Answer 6

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

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

所以我可以自由地将data-toggle属性用于其他东西（例如data-toggle="button"）。

Answer 7

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

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

Answer 8

另一种解决方案：

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

Answer 9

只是为了补充@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);

Answer 10

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

Answer 11

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

我建议在标签外使用 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>

Answer 12

HTML（ejs dianmic 网页）：这是所有用户的表格列表，并从 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 --> 

JS：

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

Answer 13

我也尝试过使用

<span></span>

但

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

Answer 14

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