複数の「データトグル」を備えたブートストラップ制御

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

編集：

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

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

javascriptを追加したり、ツールチップ関数を変更したりせずにモーダルとツールチップを追加したい場合は、単にその周りに要素をラップすることもできます。

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>

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

$(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();

次のjQueryを使用してマークアップを変更する必要なく、この問題を解決することができました。モーダルに既にデータ切り替えを使用しているボタンのツールチップが欲しいという同様の問題がありました。ここで必要なのは、ボタンにタイトルを追加することだけです。

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

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

HTML

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

とにかく、使用するメソッドに関係なく、JAVASCRIPT を含める必要があります。

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

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

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

見てみな... ：-）

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

私はhrefを使用してモーダルをロードし、ツールチップのデータ切り替えを残します：

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

BootstrapはツールチップをJavascriptを介してのみ初期化することを強制するため、私はdata-toggle="tooltip"（その時点では役に立たないため）に変更しclass="bootstrap-tooltip"、このJavascriptを使用してツールチップを初期化しました。

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

そして、私はdata-toggle他の何かのために属性を自由に使うことができました（例えばdata-toggle="button"）。

補足として@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);

もう1つの解決策：

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

クラスを使用した素晴らしい解決策があり.stretched-linkます。ボタンにはクラスが必要.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>

タグのモーダルを開いてツールチップを表示したい場合、タグ内にツールチップを実装すると、タグの近くにツールチップが表示されます。このような

タグの外側で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>

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