171

「データ切り替え」を介してブートストラップ コントロールに複数のイベントを割り当てる方法はありますか。たとえば、「ツールチップ」と「ボタン」トグルが割り当てられたボタンが必要だとします。
data-toggle="tooltip button" を試してみましたが、ツールチップしか機能しませんでした。

編集：

これは簡単に「回避可能」です

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

14 に答える 14

383

JavaScript を追加したり、ツールチップ機能を変更したりせずに、モーダルとツールチップを追加したい場合は、単純に要素をラップすることもできます。

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>
于 2015-02-04T08:30:50.707 に答える
80

ツールチップは自動的に初期化されないため、ツールチップの初期化を変更できます。私はこのようにしました：

$(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();
于 2014-01-22T02:58:18.830 に答える
11

これは、私が実装したばかりの最良のソリューションです。

HTML

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

使用する方法に関係なく、とにかく含める必要があるJAVASCRIPT 。

$('[rel="tooltip"]').tooltip();
于 2016-08-13T11:33:45.550 に答える
8

まだ。ただし、いつか誰かがこの機能を追加することが提案されています。

次のブートストラップ Github の問題は、あなたが望んでいることの完璧な例を示しています。可能ですが、この段階で独自の回避策のコードを書かないとできません。

見てみな... ：-）

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

于 2013-05-06T16:11:39.093 に答える
3

href を使用してモーダルを読み込み、ツールチップの data-toggle を残します。

<a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
>
+
</a>
于 2017-10-31T10:35:47.730 に答える
2

@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);
于 2017-04-06T14:05:06.567 に答える
0

HTML (ejs diamic Web ページ): これは、すべてのユーザーのテーブル リストであり、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'));
        });
    });
于 2021-02-12T08:41:44.653 に答える