web-dev-qa-db-ja.com

AngularJSでブートストラップツールチップを使用する

私は自分のアプリでBootstrapツールチップを使用しようとしています。私のアプリはAngularJSを使用しています現在、私は以下を持っています：

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left">
            Tooltip on left
</button>

私は使う必要があると思います

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

しかし、よくわかりません。上記の行を追加しても、私のコードは機能しません。必要以上のものがあるので、私はUIブートストラップの使用を避けようとしています。ただし、ツールチップの部分だけを含める必要がある場合は、それを受け入れてください。それでも、私はその方法を理解できません。

誰かがブートストラップツールチップをAngularJSで動かす方法を教えてもらえますか？

angularjstwitter-bootstraptwitter-bootstrap-tooltip
88
user2871401

そもそもツールチップを機能させるには、コード内でそれらを初期化する必要があります。しばらくAngularJSを無視すると、jQueryでツールチップが機能するようになります。

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

Angularによってレンダリングされたコンテンツでない限り、これはAngularJSアプリでも機能します（例：ng-repeat）。その場合は、これを処理するためのディレクティブを書く必要があります。これは私のために働いた簡単なディレクティブです：

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

それからあなたがしなければならないのはあなたがツールチップを表示させたい要素に "tooltip"属性を含めることです：

<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>

それが役立つことを願っています！

146
aStewartDesign

私が考え出すことができた最高の解決策はこのようにあなたの要素に "onmouseenter"属性を含めることです：

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>
56
gabeodess

UIブートストラップを使った簡単な答え - （ i.bootstrap.tooltip ）

この質問に対して非常に複雑な答えがたくさんあるようです。これは私のために働いたものです。

  1. Install UI Bootstrap - $ bower install angular-bootstrap

  2. 依存関係としてUIブートストラップを注入 - angular.module('myModule', ['ui.bootstrap']);

  3. HTMLに ib-tooltipディレクティブ を使用してください。

<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>
30
Derek Soike

Angularアプリを作成している場合は、でjQueryを使用できます。ただし、もっと角度のあるものを優先してそれを避けようとする多くの理由がありますドリブンパラダイム。ブートストラップで提供されているスタイルを引き続き使用することはできますが、 UI Bootstrapを使用してjQueryプラグインをネイティブのAngularに置き換えます。

Boostrap CSSファイル、Angular.js、およびui.Bootstrap.jsを含めます。

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

このようにモジュールを作成するときにui.bootstrapを挿入したことを確認してください。

var app = angular.module('plunker', ['ui.bootstrap']);

それから、jQueryによって拾われるデータ属性の代わりに、角度ディレクティブを使うことができます：

<button type="button" class="btn btn-default" 
        title="Tooltip on left" data-toggle="tooltip" data-placement="left"tooltip="Tooltip on left" tooltip-placement="left" >
  Tooltip on left
</button>

Plunkerでのデモ

UIブートストラップの回避

jQuery.min.js（94kb） + Bootstrap.min.js（32kb） からも、より多くの情報が得られます。あなたが必要としているよりもはるかに多く、 ui-bootstrap.min.js（41kb） よりもはるかに多くです。

そして、モジュールのダウンロードに費やされた時間は、パフォーマンスの一面にすぎません。

必要なモジュールだけをロードしたい場合は、「ビルドを作成」し、 Bootstrap-UI Webサイト からツールチップを選択します。あるいは、 のツールチップのソースコード を調べて、必要なものを選ぶこともできます。

ツールチップとテンプレート（6kb） だけを使った、縮小カスタムビルド

27
KyleMit

Bootstrap JSとjQueryを含めましたか？

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

まだロードしていないのであれば、Angular UI（ http://angular-ui.github.io/bootstrap/ ）はそれほどオーバーヘッドにはなりません。私はAngularアプリでそれを使用しています、そしてそれはTooltipディレクティブを持っています。 tooltip="tiptext"を使ってみてください

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left"
        tooltip="This is a Bootstrap tooltip"
        tooltip-placement="left" >
            Tooltip on left
</button>
11
prototype

簡単なAngularディレクティブを書きました。

これがデモです。 http://jsbin.com/tesido/edit?html,js,output

指令（ブートストラップ3用）：

// registers native Twitter Bootstrap 3 tooltips
app.directive('bootstrapTooltip', function() {
  return function(scope, element, attrs) {
    attrs.$observe('title',function(title){
      // Destroy any existing tooltips (otherwise new ones won't get initialized)
      element.tooltip('destroy');
      // Only initialize the tooltip if there's text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

注：Bootstrap 4を使用している場合、上記の6行目と11行目でtooltip('destroy')をtooltip('dispose')に置き換える必要があります（この更新のための ser1191559に感謝 ）

titleを持つ任意の要素に、属性としてbootstrap-tooltipを追加するだけです。 Angularはtitleへの変更を監視しますが、それ以外の場合はツールチップ処理をBootstrapに渡します。

これにより、通常のブートストラップ方法でネイティブの ブートストラップツールチップオプション をdata-属性として使用することもできます。

マークアップ：

<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
        Tooltip on left
</div>

AngularStrapとUI Bootstrapが提供する複雑なバインディングと高度な統合がすべて含まれているわけではないことは明らかですが、既にBootstrapのJSをAngularアプリで使用していて基本的なツールチップが必要な場合は、良い解決策です。コントローラを変更したり、マウスイベントを管理したりすることなく、アプリ全体を橋渡しできます。

7
brandonjp

動的なシングルページアプリケーションにはselectoroption を使用できます。

jQuery(function($) {
    $(document).tooltip({
        selector: '[data-toggle="tooltip"]'
    });
});

セレクタが提供されている場合、ツールチップオブジェクトは指定されたターゲットに委任されます。実際には、これは動的HTMLコンテンツにツールチップを追加できるようにするために使用されます。

4
rinat.io

このような簡単なディレクティブを作成することができます。

angular.module('myApp',[])
    .directive('myTooltip', function(){
        return {
            restrict: 'A',
            link: function(scope, element){
                element.tooltip();
            }
        }
    });

次に、必要に応じてカスタムディレクティブを追加します。

<button my-tooltip></button>
4
Emanuele Paratore

AngularStrap whichでこれを実行できます。

"Bootstrap 3.0以降をAngularJS 1.2以降のアプリにシームレスに統合できるようにするネイティブディレクティブのセットです。"

このようにライブラリ全体を注入することができます。

var app = angular.module('MyApp', ['mgcrea.ngStrap']);

または、このようにツールチップ機能を追加するだけです。

var app = angular.module('MyApp', ['mgcrea.ngStrap.tooltip']);

スタックスニペットのデモ

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  
<link href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>
3
ilndboi

最も簡単な方法は、関連するコントローラに$("[data-toggle=tooltip]").tooltip();を追加することです。

2
zied.hosni
var app = angular.module('MyApp', ['mgcrea.ngStrap']);  
<link href="//cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>
1
Ravi Kumar

ツールチップ（ui.bootstrap.tooltip）を試してください。 ブートストラップのAngular指令 を参照してください。

<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>

AngularJSの上にあるJavaScriptコードを避けることをお勧めします。

1
Asha Joshi

Angularjsでブートストラップツールチップを使用する場合は、jquery-uiを使用している場合はスクリプトの順序を覚えておく必要があります。

  • jQuery
  • jQueryのUI
  • ブートストラップ

試してみる

1
user6706

ツールチップを動的に割り当てる場合にのみ読んでください。

すなわち<div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

動的なツールチップに問題がありましたが、それはビューで常に更新されているわけではありませんでした。例えば、私はこのようなことをしていました：

これは一貫して機能しませんでした

<div ng-repeat="person in people">
    <span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
      {{ person.name }}
    </span> 
</div>

そしてそれを活性化する：

$timeout(function() {
  $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)

しかし、私の人々の配列は変わるので私のツールチップは必ずしも更新されないでしょう。私はこのスレッドと他のすべての修正を運なしで試してみました。グリッチはたった5％の時間しか起きていないようで、繰り返すのはほとんど不可能でした。

残念ながら、これらのツールチップは私のプロジェクトにとってミッションクリティカルであり、間違ったツールチップを表示することは非常に悪い可能性があります。

問題と思われるもの

ブートストラップはtitleプロパティの値を新しい属性data-original-titleにコピーし、ツールチップをアクティブにするときにtitleプロパティを削除することがありました。しかし、私のtitle={{ person.tooltip }}が変更されるとき、新しい値が常にプロパティdata-original-titleに更新されるとは限りません。私はツールチップを非アクティブ化し、それらを再アクティブ化し、それらを破棄し、このプロパティに直接バインドしました。しかし、これらはそれぞれうまくいかなかったか、新しい問題を引き起こしました。 title属性とdata-original-title属性の両方が、私のオブジェクトから削除され、バインド解除されるなどです。

何が働いたのか

おそらく私が今までにプッシュした中で最も醜いコードですが、それは私にとってこの小さいながらも実質的な問題を解決しました。ツールチップが新しいデータで更新されるたびに、このコードを実行します。

$timeout(function() {
    $('[data-toggle="tooltip"]').each(function(index) {
      // sometimes the title is blank for no apparent reason. don't override in these cases.
      if ($(this).attr("title").length > 0) {
        $( this ).attr("data-original-title", $(this).attr("title"));
      }
    });
    $timeout(function() {
      // finally, activate the tooltips
      $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
    }, 500);
}, 1500);

本質的にここで何が起こっているのですか：

  • ダイジェストサイクルが完了し、titlesが更新されるまでしばらく待ちます（1500ミリ秒）。
  • 空ではない（つまり、変更されている）titleプロパティがある場合は、それをdata-original-titleプロパティにコピーして、Bootstrapのツールチップによって取得されるようにします。
  • ツールチップを再アクティブ化する

この長い答えが、私のように苦労している人に役立つことを願っています。

1
Matt

モデルが変更されたときにツールチップを更新するために、私は単にtitleの代わりにdata-original-titleを使います。

例えば.

<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>

このようなツールチップの使用を初期化していることに注意してください。

<script type="text/javascript">
    $(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    })
</script>

バージョン：

  • AngularJS 1.4.10
  • ブートストラップ3.1.1
  • jquery：1.11.0
0
zim

@aStewartDesignの回答の改善：

.directive('tooltip', function(){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
      element.hover(function(){
        element.tooltip('show');
      }, function(){
        element.tooltip('hide');
      });
    }
  };
});

Jqueryの必要はありません。これは遅いanwserですが、私はトップ投票の1つであるため、これを指摘する必要があります。

0
aXul

依存関係をインストールします。

npm install jquery --save
npm install tether --save
npm install bootstrap@version --save;

次に、angular-cli.jsonにスクリプトを追加します。

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "script.js"
    ]

それから、script.jsを作成します。

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

サーバーを再起動してください。

0
Danilo Thiago

AngularStrapは、IE 8のangularjsバージョン1.2.9では機能しないため、アプリケーションでIE 8をサポートする必要がある場合は、これを使用しないでください。

0
Tron Diggy