私のアプリで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でBootstrap Tooltipを機能させる方法を教えてもらえますか？
回答:
ツールチップを最初から機能させるには、コード内でツールチップを初期化する必要があります。AngularJSを少しの間無視すると、次のようにしてツールチップをjQueryで機能させることができます。
$(document).ready(function(){
$('[data-toggle=tooltip]').hover(function(){
// on mouseenter
$(this).tooltip('show');
}, function(){
// on mouseleave
$(this).tooltip('hide');
});
});
これは、Angularによってレンダリングされたコンテンツ（例：ng-repeat）でない限り、AngularJSアプリでも機能します。その場合は、これを処理するディレクティブを作成する必要があります。ここに私のために働いた単純なディレクティブがあります：
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');
});
}
};
});
次に、ツールチップを表示する要素に「ツールチップ」属性を含めるだけです。
<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>お役に立てば幸いです。
$(element).tooltip({html: 'true', container: 'body'})カスタマイズされたオプションを提供する例として、tooltip showを呼び出す前に追加できます。
element.tooltip()jQueryの代わりに使用できます。
私が思いついた最善の解決策は、次のように要素に「onmouseenter」属性を含めることです。
<button type="button" class="btn btn-default"
data-placement="left"
title="Tooltip on left"
onmouseenter="$(this).tooltip('show')">
</button>
単純な答え - UIブートストラップを使用して（ui.bootstrap.tooltip）
この質問には非常に複雑な答えがたくさんあるようです。ここに私のために働いたものがあります。
UIブートストラップのインストール -$ bower install angular-bootstrap
依存関係としてUIブートストラップを挿入する- angular.module('myModule', ['ui.bootstrap']);
HTMLでuib-tooltipディレクティブを使用します。
<button class="btn btn-default"
type="button"
uib-tooltip="I'm a tooltip!">
I'm a button!
</button>
Angularアプリを構築している場合は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>
jQuery.min.js（94kb） + Bootstrap.min.js（32kb）も必要以上のものを提供しており、ui-bootstrap.min.js（41kb）をはるかに超えています。
また、モジュールのダウンロードに費やされる時間は、パフォーマンスの1つの側面にすぎません。
本当に必要なモジュールのみをロードしたい場合は、「ビルドを作成」して、Bootstrap-UI Webサイトからツールチップを選択できます。または、ツールチップのソースコードを調べて、必要なものを選択することもできます。
ここでは、ツールチップとテンプレートのみを含む縮小されたカスタムビルド（6kb）
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>
私は私たちにとってうまく機能している簡単なAngular Directiveを作成しました。
ここにデモがあります：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'];
});
}
});注：ライン6＆11以上で、ブートストラップ4を使用している場合は、交換する必要がありますtooltip('destroy')とtooltip('dispose')（のおかげで、このupadate用user1191559）
を使用しbootstrap-tooltipて任意の要素に属性として追加するだけtitleです。Angularはへの変更を監視しますが、titleそうでない場合はツールチップの処理をBootstrapに渡します。
これにより、通常のブートストラップ方法で、ネイティブブートストラップツールチップオプションをdata-属性として使用することもできます。
マークアップ：
<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
Tooltip on left
</div>明らかに、これにはAngularStrapとUI Bootstrapが提供する精巧なバインディングと高度な統合のすべてが含まれているわけではありませんが、AngularアプリでBootstrapのJSをすでに使用していて、アプリ全体に基本的なツールチップブリッジが必要ない場合は、優れたソリューションです。コントローラの変更またはマウスイベントの管理。
Error: cannot call methods on tooltip prior to initialization; attempted to call method 'destroy'エラーが発生しました。
element.tooltip('destroy'); とelement.tooltip('dispose');両方の場所インチ
次のような単純なディレクティブを作成できます。
angular.module('myApp',[])
.directive('myTooltip', function(){
return {
restrict: 'A',
link: function(scope, element){
element.tooltip();
}
}
});次に、必要に応じてカスタムディレクティブを追加します。
<button my-tooltip></button>あなたはAngularStrapでこれを行うことができます
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>最も簡単な方法は$("[data-toggle=tooltip]").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>すなわち <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 ms）。title（すなわち、それは変更されている）空でない性質は、それをコピーしdata-original-title、それがブートストラップのtoolipsによってピックアップされるようにプロパティ。この長い答えが、私がそうであったように苦労していた誰かを助けることを願っています。
ツールチップ（ui.bootstrap.tooltip）を試してください。BootstrapのAngularディレクティブを参照してください
<button type="button" class="btn btn-default"
tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>
AngularJSの上でJavaScriptコードを避けることをお勧めします
モデルが変更されたときにツールチップを更新するには、data-original-title代わりにを使用します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>バージョン：
@aStewartDesignの答えを改善する：
.directive('tooltip', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
element.hover(function(){
element.tooltip('show');
}, function(){
element.tooltip('hide');
});
}
};
});jqueryの必要はありません。これは遅いanwserですが、私はトップ投票されているので、私はこれを指摘する必要があると考えました。
依存関係をインストールします。
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();ここでサーバーを再起動します。
tooltip関数のため、jQueryを使用していることをangularJSに通知する必要があります。
これはあなたの指示です：
myApp.directive('tooltip', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.on('mouseenter', function () {
jQuery.noConflict();
(function ($) {
$(element[0]).tooltip('show');
})(jQuery);
});
}
};
});そしてこれはディレクティブの使い方です：
<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>