Edit - Stack Overflow

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

Required fields*

Rev

Required fields*

Popover editable for tooltip

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*

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>

Edit Summary*

Cancel

Add a comment |

Correct minor typos or mistakes
Clarify meaning without changing it
Add related resources or links
Always respect the author’s intent
Don’t use edits to reply to the author

create code fences with backticks ` or tildes ~
```
like so
```
add language identifier to highlight code
```python
def function(foo):
print(foo)
```
put returns between paragraphs
for linebreak add 2 spaces at end
_italic_ or **bold**
indent code by 4 spaces
backtick escapes `like _so_`
quote by placing > at start of line
to make links (use https whenever possible)

<https://example.com>

[example](https://example.com)

<a href="https://example.com">example</a>

formatting help »
answering help »

Collectives™ on Stack Overflow

Popover editable for tooltip

Answer*