how to show html on pop over using angular ui bootstrap?

Question

I make demo of pop over like this .It show a pop over on right side when I click the button .But now problem is that how I will show some html on pop over .

<html ng-app="plunker"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <button popover-placement="right" popover="On the Right!" class="btn btn-default">Right</button> </body> <script> angular.module('plunker', ['ui.bootstrap']); </script> </html>

I have this HTML I need to how on add this on pop over .I know there is way in bootrap.js to add html on popover .I don't want to use that I want to use angular UI bootrap.js

<div ng-controller="axcont"> <ul class="list-group"> <li class="list-group-item" ng-click="add()">add row</li> <li class="list-group-item " ng-click="deleteRow($index)">Deleterow</li> </ul> </div>

I did more try on that like that but getting undefined.May be I am wrong I just doing RND

<html ng-app="plunker"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <button pop-over title="Mode of transport" content-url="pop.html" class="btn btn-default">Right</button> </body> <script> var a=angular.module('plunker', ['ui.bootstrap']); a.directive('popOver', function ($compile, $http, $templateCache) { return { restrict: 'A', scope: true, link: function popOverPostLink(scope, elem, attrs) { $http.get(attrs.contentUrl, {cache: $templateCache}).success( function (tmpl) { var options = { content: $compile(tmpl)(scope), placement: 'bottom', html: true, trigger:'click', title: attrs.title }; elem.popover(options); scope.hidePopover = function () { elem.popover('hide'); } } ); } }; }); </script> </html>

In your code above, you are using the bootstrap.js with elem.popover. — runTarm, CommentedAug 9, 2014 at 6:44
yes..but I don't want to use bootstrap.js.I want to use only angular UI bootstrap to make pop over.some developer said it better to uses Angular UI botrap because it gives all callback event — Shruti, CommentedAug 9, 2014 at 6:45
@runTarm do you have any idea make pop over without bootrap.js — Shruti, CommentedAug 9, 2014 at 6:54
This is not support out of the box by Angular UI Bootstrap yet, see a long discussion here. You have to create your own custom directive or consider using another project angular-strap — runTarm, CommentedAug 9, 2014 at 7:09
@runTarm thanks for giving information can you using my html and load it on button click if you have idea of custom directive — Shruti, CommentedAug 9, 2014 at 7:13

bhantol · Accepted Answer · 2014-08-09 05:30:11Z

1

Use AngularUI Bootstrap directive tooltip-html-unsafe

<span tooltip-html-unsafe="<div>Hi</div><div>Hi Hi Hi</div><div>Hi</div>"> <b>Hover on Me!</b> </span>

Demo and code is in here Plnkr tooltip-html-unsafe

answered Aug 9, 2014 at 5:30

bhantol

9,6368 gold badges48 silver badges83 bronze badges

thanks for giving answer .but there is issue in that ..I need that on click ..secondly why you are using this $scope.htmlTooltip = '<div><span>Hi I am a tooltip</span></div>';
– Shruti
CommentedAug 9, 2014 at 5:33
I forgot to remove the $scope.htmlTooltip = '<div><span>Hi I am a tooltip</span></div>'; I fixed in the plnkr.
– bhantol
CommentedAug 9, 2014 at 5:36
Got your update. You want tooltip on click not on hover ? Is that correct ?
– bhantol
CommentedAug 9, 2014 at 5:37
yes thank if you take my html it is more better (having ul and li)
– Shruti
CommentedAug 9, 2014 at 5:37
why I am saying to take my html because I need to take click event of li
– Shruti
CommentedAug 9, 2014 at 5:41

| Show 4 more comments

Devvie · Accepted Answer · 2017-12-05 12:51:47Z

According to the docs Angular-ui, you should be defining the popover as uib-popover instead of just popover, and if you would like to bind html to the popover you would either use uib-popover-html="<div> hello </div>" or template binding uib-popover-template="<<teamplateNameHere>>"

user7398648 · Accepted Answer · 2017-02-22 16:52:31Z

In your options, add a templateUrl.

For example:

templateUrl: 'your/url' + type + 'popup.html'

More info: https://github.com/angular-ui/bootstrap/tree/master/src/modal/docs

Vishnu T Asok · Accepted Answer · 2017-04-22 10:00:38Z

tooltip-html-unsafe With Image and Style Tag

<span tooltip-html-unsafe="<img src='https://upload.wikimedia.org/wikipedia/commons/0/00/Lubuntu-icon.png' style='width:24px;'> <div style='font-size:24px;'>Tooltip With Image</div>"> <b>Hover on Me!</b> </span>

Myxuan · Accepted Answer · 2017-11-29 03:31:58Z

0

tooltip-html-unsafeyou can put anything in it

answered Nov 29, 2017 at 3:31

Myxuan

241 bronze badge

This does not add anything that the other existing answers do not already cover. It would be better to upvote or comment on the other answers if you do not have anything new to add.
– JonathanDavidArndt
CommentedNov 29, 2017 at 3:51

Add a comment |

Collectives™ on Stack Overflow

how to show html on pop over using angular ui bootstrap?

5 Answers 5

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Linked

Related