ポップオーバーをツールチップ用に編集する

Question

私は角度のあるjsとブートストラップを初めて使っています。私は、ホバー上でポップオーバーを実装するか、またはクリックする必要があり、ユーザーがツールチップを編集できる必要があるという要件があります。あなたはそれを実装するためのアプローチを提案できますか？

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data- content="Some content">Hover over me</a> 

私は他の方法にもオープンしています。

Answer 1

チェックangular-ui-bootstrap - プロジェクト、特にポップオーバーディレクティブ：

https://angular-ui.github.io/bootstrap/#/popover

あなたは、通常のブートストラップCSSと一緒に、index.htmlをするために、角-UI-ブートストラップスクリプトを追加する必要があります - ありこのためCDN：

https://cdnjs.com/libraries/angular-ui-bootstrap#

のindex.htmlに上記2つのスクリプト（分またはunminified）とbootstrap.cssファイルを追加した後 - あなたはangulを追加する必要があります

<button uib-popover="This popover appeared on mouse enter!" 
      popover-trigger="'mouseenter'" 
      type="button" 
      class="btn btn-default">Hover Over</button> 

あなたは明らかに、これは動的にすることができます - あたり：mousenter上のインスタンスのために - あなたはポップオーバーを使用する準備ができているその時点で

angular.module('myModule', ['ui.bootstrap']); 

：のように、ブートストラッププロセスは、アプリにAR-UI-ブートストラップ要件は - ドキュメントの例と同じように：

<div class="form-group" ng-controller="MyController as vm"> 
     <label>Popup Text:</label> 
     <input type="text" 
      ng-model="vm.popoverContent" 
      class="form-control"/> 

     <button uib-popover="{{vm.popoverContent}}" 
      popover-trigger="'mouseenter'" 
      type="button" 
      class="btn btn-default">Dynamic Hover Over</button> 
    </div>