按钮中的提示框和模态框 - Bootstrap

Question

<button type="button" class="btn" data-placement="bottom" rel="tooltip" title="Info" data-toggle="modal" data-target="#myModal"></button>

我希望在一个按钮中实现模态框和工具提示。但是在模态框关闭后，工具提示会被显示出来，我不希望这样。我正在尝试使用以下代码来解决：

$('[rel="tooltip"]').tooltip('manual');
     if (!$('#myModal').is(':visible')) {
         $('[rel="tooltip"]').tooltip('hide');
     }

这段代码有什么问题？

- nehel

Answer 1

使用这种方法触发工具提示在模态框弹出后会保持焦点，这段代码应该适用于您。

$(document).ready(function(){
    $('[rel="tooltip"]').tooltip({trigger: "hover"});
});

- Jason

Answer 2

实际上，这不是实现您想要的最佳方法。您可以通过另一种方式实现。请查看此代码片段

只需将您的btn包裹在一个触发模态框的中即可。

<span data-toggle="modal" data-target="#myModal">
    <button type="button" class="btn btn-primary" data-placement="bottom" title="Info" data-toggle="tooltip">Launch demo modal</button>
</span>

- Sherif Ahmed

---

这对我很有效，而且也很简单。 - Krish

与Bootstrap 5.2良好兼容。 - Elliot Vargas

Answer 3

也许这可以帮助你？

<!-- PROMOTE BUTTON JS-->
$('[id="promote"],[id="demote"]').click(function(){
    $('#smallmodal').modal('show');
});
<!-- END PROMOTE BUTTON JS-->

当您单击具有id="promote"或id="demote"的按钮时，它将触发具有id="smallmodal"的模态框并显示工具提示。

<button class="item"  data-placement="top" data-toggle="tooltip" data-target="#smallmodal-promote" title="Demote Image" name="demote" id="demote" value="">
  <i class="zmdi zmdi-download"></i>
</button>

- Xao

Answer 4

我在Bootstrap 5中做了什么：

<a type="button" data-bs-toggle="tooltip" data-bs-title="Info">
   <span class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal" >Modal</span>
</a>

- carbres