Bootstrap 按钮中的工具提示+模式-引导

bcs8qyzn  于 2023-08-01  发布在  Bootstrap
关注(0)|答案(4)|浏览(128)
<button type="button" class="btn" data-placement="bottom" rel="tooltip" title="Info" data-toggle="modal" data-target="#myModal"></button>

字符串
得到模态和工具提示在1个按钮。模式关闭后,将显示工具提示。我不想那样我想用这段代码实现:

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


这段代码有什么问题?

j5fpnvbx

j5fpnvbx1#

在模态弹出后,以这种方式触发工具提示来保持焦点,这段代码应该对您有用。

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

字符串

fnatzsnv

fnatzsnv2#

实际上,这不是实现您想要的最佳方法,您可以用另一种方法来实现,请检查此fiddle
只需将btn Package 在一个span中,这将触发模态

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

字符串

m3eecexj

m3eecexj3#

也许这个能帮上忙

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

xriantvc

xriantvc4#

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

字符串

相关问题