current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 10 down vote favorite

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>
share|improve this question
    
In your code above, you are using the bootstrap.js with elem.popover. – runTarm Aug 9 '14 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 Aug 9 '14 at 6:45
    
@runTarm do you have any idea make pop over without bootrap.js – Shruti Aug 9 '14 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 Aug 9 '14 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 Aug 9 '14 at 7:13
up vote 0 down vote

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

share|improve this answer
    
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 Aug 9 '14 at 5:33
    
please check my update – Shruti Aug 9 '14 at 5:35
    
I forgot to remove the $scope.htmlTooltip = '<div><span>Hi I am a tooltip</span></div>'; I fixed in the plnkr. – bhantol Aug 9 '14 at 5:36
    
Got your update. You want tooltip on click not on hover ? Is that correct ? – bhantol Aug 9 '14 at 5:37
    
yes thank if you take my html it is more better (having ul and li) – Shruti Aug 9 '14 at 5:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.