Popover可編輯工具提示

Question

我是角度js和bootstrap的新手。 我要求我需要在懸停或點擊時實現彈出窗口，用戶應該能夠編輯工具提示。 你能建議一種實現它的方法嗎？

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

我也對任何其他方法持開放態度。

Answer 1

檢查angular-ui-bootstrap - 項目，特別是popover指令：

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

您需要將angular-ui-bootstrap腳本添加到index.html，以及常規的bootstrap css - 這里有一個CDN：

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

將上述2個腳本（min或unminified）和bootstrap.css文件添加到index.html后，必須將angular-ui-bootstrap添加到應用程序引導過程，如：

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

此時您已准備好使用popover - 例如在mousenter上：

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

根據您的要求，您可以明顯地實現這一點 - 就像文檔中的示例一樣：

    <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>