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
– runTarm, Commented Aug 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
– Shruti, Commented Aug 9, 2014 at 6:45
@runTarm do you have any idea make pop over without bootrap.js — Shruti
– Shruti, Commented Aug 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
– runTarm, Commented Aug 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
– Shruti, Commented Aug 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 badges84 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Shruti Over a year ago

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

bhantol Over a year ago

I forgot to remove the $scope.htmlTooltip = '<div><span>Hi I am a tooltip</span></div>'; I fixed in the plnkr.

bhantol Over a year ago

Got your update. You want tooltip on click not on hover ? Is that correct ?

Shruti Over a year ago

yes thank if you take my html it is more better (having ul and li)

Shruti Over a year ago

why I am saying to take my html because I need to take click event of li

|

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

1

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

answered Dec 5, 2017 at 12:51

Devvie

112 bronze badges

Comments

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

0

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

answered Feb 22, 2017 at 16:52

user7398648

263 bronze badges

Comments

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

0

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>

answered Apr 22, 2017 at 10:00

Vishnu T Asok

2444 silver badges15 bronze badges

Comments

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

1 Comment

JonathanDavidArndt Over a year ago

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.

Collectives™ on Stack Overflow

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

5 Answers 5

9 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related