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

Question

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

编辑：

很容易“解决”这个问题

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

Answer 1

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

<span data-toggle="modal" data-target="#id">
    <a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</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

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

以下引导程序Github问题显示了您希望的完美示例。有可能 - 但不是没有在此阶段编写自己的变通方法代码。

检查出来......： - ）

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

Answer 4

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

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

Answer 5

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

<强> HTML

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

JAVASCRIPT 无论您使用何种方法，无论如何都需要包含这些内容。

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

Answer 6

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

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

Answer 7

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

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

因此我可以将data-toggle属性用于其他内容（例如data-toggle="button"）。

Answer 8

使用类.stretched-link有一个不错的解决方案。 Button必须具有类.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 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

另一个解决方案：

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

Answer 11

当您在标签上打开模态并想要显示工具提示时，如果您在标签内部实施工具提示，则会在工具提示旁边显示标签。像这样

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

print 'Area: %s\nInventory: %s\nHealth: %s\nHunger: %s\nWater: %s' % (area, str(inventory), str(health), str(hunger), str(water))

Answer 12

我也试过使用

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

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 14

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