Popover editable for tooltip

Question

I am new to angular js and bootstrap. I have a requirement that i need to implement a popover on hover or click and the user should be able to edit the tooltip. Could you suggest an approach to implement it.

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

I am open to any other approach also.

Answer 1

Check the angular-ui-bootstrap - project, specifically the popover directive:

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

You will need to add the angular-ui-bootstrap scripts to index.html, along with the regular bootstrap css - there is a CDN for this:

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

After adding the above 2 scripts (min or unminified) and the bootstrap.css file to index.html - you must add angular-ui-bootstrap to your apps bootstrap process like:

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

At that point you are ready to use the popover - for instance on mousenter:

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

You can obviously make this dynamic - per your requirements - just like the examples in the docs:

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