web-dev-qa-db-ja.com

Bootstrap複数の「データ切り替え」を使用した制御

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

編集：

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

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");
buttontwitter-bootstrapbinding
129
LastTribunal

JavaScriptを追加したり、ツールチップ関数を変更したりせずにmodal and tooltipを追加する場合は、単純に要素をラップすることもできます。

<span data-toggle="modal" data-target="#id">
    <a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>
</span>
271
Roman Holzner

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

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

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

次のbootstrap Githubの問題は、あなたが望むものの完璧な例を示しています。ただし、この段階で独自の回避策コードを記述することはできません。

見てみな... ：-）

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

7
obrientimothya

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

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

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

HTML

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

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

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

クラス.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>
2
Jakub Muda

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

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

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

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

そして、私は自由にdata-toggle属性を他の何かに使用しました（例：data-toggle="button"）。

2
ankabout

もう1つのソリューション：

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

@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
Thiago Cardoso

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

enter image description here

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

enter image description here

0
virender