92

私のアプリで 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ブートストラップを使用しないようにしています。ただし、ツールチップの部分だけを含める必要がある場合は、それを受け入れます. それでも、私はそれを行う方法を理解できません。

Bootstrap Tooltip を AngularJS で動作させる方法を教えてもらえますか?

4

19 に答える 19

154

ツールチップを最初に機能させるには、コードでそれらを初期化する必要があります。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>

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

于 2014-07-25T17:57:54.113 に答える
33

簡単な答え- UI Bootstrap ( ui.bootstrap.tooltip )を使用する

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

  1. UI ブートストラップのインストール-$ bower install angular-bootstrap

  2. UI Bootstrap を依存関係として挿入 -angular.module('myModule', ['ui.bootstrap']);

  3. HTML でuib-tooltip ディレクティブを使用します。

<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>
于 2016-06-02T23:40:18.583 に答える
28

Angular アプリを構築している場合はjQuery を使用できますが、より角度のあるパラダイムを優先して jQuery を回避しようとする正当な理由がたくさんあります。ブートストラップによって提供されるスタイルを引き続き使用できますが、UI ブートストラップを使用して 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)よりもはるかに多くのものを提供しています。

また、モジュールのダウンロードにかかる時間は、パフォーマンスの 1 つの側面にすぎません。

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

ツールチップとテンプレートのみを含む縮小されたカスタム ビルド(6kb)

于 2014-08-04T14:49:34.823 に答える
12

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>
于 2013-12-18T20:13:09.390 に答える
8

簡単な Angular ディレクティブを作成しましたが、これはうまく機能しています。

ここにデモがあります: http://jsbin.com/tesido/edit?html,js,output

ディレクティブ (Bootstrap 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')この更新については user1191559 に感謝します) 。

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

これにより、ネイティブのBootstrap Tooltip Optionsdata-を通常の Bootstrap の方法で属性として使用することもできます。

マークアップ:

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

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

于 2015-12-08T23:10:07.463 に答える
4

動的な単一ページ アプリケーションのselector オプションを使用できます。

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

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

于 2016-01-21T13:19:57.807 に答える
4

次のような単純なディレクティブを作成できます。

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

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

<button my-tooltip></button>
于 2016-04-12T13:22:59.863 に答える
3

AngularStrapでこれを行うことができます。

AngularJS 1.2+ アプリへの Bootstrap 3.0+ のシームレスな統合を可能にするネイティブ ディレクティブのセットです。"

次のようにライブラリ全体を注入できます。

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>

于 2014-08-11T12:57:49.173 に答える
2

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

于 2015-09-29T00:22:20.007 に答える
1

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

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

それは試され、テストされています

于 2016-09-29T11:49:42.843 に答える
1 

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>

于 2016-05-17T10:21:16.203 に答える
0

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

于 2015-07-17T14:28:21.477 に答える
0

@aStewartDesign の回答の改善:

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

jqueryは必要ありません。これは遅い回答ですが、投票数が最も多いので、これを指摘する必要があります。

于 2016-11-28T16:21:31.907 に答える