3
A
答えて
0
これは私がcomponent
で使用しているコードで、ユーザーがホバーしている間開いているポップオーバーを制御します。私はそれが面白いと思うが、それは効率的かつ明確です。これは、私が別の問題に気付いた2つのソリューションのマージで、カスタムトリガーを持つui-bootstrap
popover/tooltipを使用しています。
app.component('myComponent', {
restrict: 'E',
templateUrl: 'path/to/html/with/popover',
controller: ['$timeout', function ($timeout) {
var self = this;
this.open = false;
this.hovered = false;
this.openTooltip = function() {
this.hovered = true;
if (!this.open) {
this.open = true;
}
};
this.keepTooltipOpen = function() {
this.hovered = true;
};
this.closeTooltip = function() {
this.hovered = false;
$timeout(function() {
if (!self.hovered)
self.open = false;
}, 500)
};
}]
});
そして、HTML自体:
<div class="myClass">
<span class="yetAnotherClass"
ng-attr-uib-popover-template="'my-tooltip.html'"
popover-placement="top"
popover-is-open="$ctrl.open"
ng-mouseenter="$ctrl.openTooltip()"
ng-mouseleave="$ctrl.closeTooltip()">
Moo moo
</span>
</div>
<script type="text/ng-template" id="my-tooltip.html">
<div class="row"
ng-mouseenter="$ctrl.keepTooltipOpen()"
ng-mouseleave="$ctrl.closeTooltip()">
<div>
bla bla bla
</div>
</div>
</script>
関連する問題
- 1. jqueryのツールチップが、マウスがテキストの上にマウスを乗せたときに表示されない
- 2. HighCharts:ツールチップ上に表示されるラベル
- 3. HTML送信ボタンのマウス・ホバー上にツールチップを表示する
- 4. マウス上のUpdatePanel(ツールチップ)
- 5. ToolStripStatusLabelにマウスをかざすとツールチップが表示されるのですか?
- 6. uib-popover-templateが表示されない
- 7. マウスの動きでブートストラップのツールチップ - ツールチップがマウスから遠くに現れる?
- 8. "uib-tooltip-html"でangularjsのツールチップ
- 9. コンテンツUIB-ツールチップ-HTMLに追加
- 10. ブートストラップのツールチップが表示されない
- 11. ツールチップが右に表示されない
- 12. ツールチップがIEに表示されない
- 13. C#キーワードの上にカーソルを置くとVisual Studioのツールチップが表示される
- 14. アイコンの上にカーソルを置くと、ツールチップにテーブルが表示される
- 15. マウスの移動後にツールチップを表示する方法
- 16. Highcharts - ツールチップが表示されたときにツールチップが表示されたら、チャートの変更不透明度
- 17. AngularJS:円の上にツールチップを表示
- 18. 軸の上にツールチップを表示し、スクロールバー
- 19. uib-datepicker-popupにカレンダーが表示されない
- 20. マウスがまだ要素の上にある場合でもjqueryのツールチップを非表示にします
- 21. ツールチップ上でマウスのホバーを検出
- 22. マウスの上に画像を表示
- 23. マウスの上にd3.layout.forceリンクツールチップを表示
- 24. SVGポリゴンの上をホバリングしたときにツールチップが表示されない
- 25. ZingChart pieツールチップが表示されない
- 26. ツールチップが表示されない
- 27. Qt QGraphicsView - ツールチップが表示されない
- 28. Googleグラフ - ツールチップが表示されない
- 29. PGraphicsのテキスト(ツールチップ)の表示が画像の上に文字化けして表示されます
- 30. イメージコントロールの上にマウスがあるときにポップアップ表示
私はUIB-ツールチップ・テンプレートを使用していますが、私はこれらのツールチップのタイトル内のリンクを持っています。 – Asit