具有多个“数据切换”的引导程序控制

Question

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

编辑：

这很容易“解决”

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

Answer 1

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

<span data-bs-toggle="modal" data-bs-target="modal">
    <a data-bs-toggle="tooltip" data-bs-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

只是为了补充@Roman Holzner 的答案...

就我而言，我有一个显示工具提示的按钮，并且在执行进一步操作之前它应该保持禁用状态。使用他的方法，即使按钮被禁用，模式也可以工作，因为它的调用是在按钮之外 - 我在 Laravel Blade 文件中，只是为了清楚:)

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

还有一个解决方案：

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

Answer 10

使用类

.stretched-link

有一个很好的解决方案。按钮必须有一个类

.position-relative

。这是一个完整的工作示例：

按钮上必须添加Tooltip，否则位置会不正确。

$('[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

我也尝试过使用

<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 包裹整个按钮（使用弹出框）：

<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

您可以通过添加 2 行 javascript 和常用的 HTML 属性来更改所需的切换

const tooltipTriggerList = document.querySelectorAll('[tooltip="true"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

现在，使用

data-bs-toggle='tooltip'

，而不是

tooltip="true"

。

最后，你的 Html 看起来像：

<button tooltip="true" data-bs-placement="top" title="Your tooltip here"/>

工作演示：

const tooltipTriggerList = document.querySelectorAll('[tooltip="true"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>



<button id="someid" style="margin:34px; height:33px !important" type="button" class="btn btn-secondary col-1 w-25 h-25  " tooltip="true" data-bs-placement="top" title="This button opens modal and also displays a tootip using different names for data-bs-toggle and initiating them with js" data-bs-toggle="modal" data-bs-target="#exampleModal">
      <i  class="fa fa-cog"></i> 
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

瞧瞧🎉！

Answer 14

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 15

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