Angular bootstrap popover disappears when the mouse enters it

Question

I have an angular bootstrap popover on some text. In the popover, I show some link where the user can click on that link and go to that website. Presently, when the user is trying to go inside popover it disappears.

If I try to keep the popover open on click instead of hovering, it doesn't close when I go to another popover.

I have created a jsfiddle where you can see

<div popover="{{careerAttribute.value}}"
     popover-append-to-body="true"
     popover-title="{{careerAttribute.title}}"
     popover-trigger="mouseenter"
     popover-placement="right"> HP
</div>

I should be able to click on the link displayed in hover and at a time single hover should be open.

As per documentation https://angular-ui.github.io/bootstrap/, you can use `HTML template` inside. Also there are examples showing template + click handlers. https://github.com/angular-ui/bootstrap/tree/master/src/popover/docs — Sandip Nirmal, Sep 23 '19 at 07:00

nash11 · Accepted Answer · 2019-09-23T08:39:57.700

You can do this by removing the popover-append-to-body. This way it will append it to the current element. Now instead of using the default popover-trigger, we will manually open and close the element from the parent td. For this we need to set popover-trigger to none and then use ng-mouseenter and ng-mouseleave on the parent to manually trigger the popover using popover-is-open. You will need to use an array to track the open popovers. You will also have to sanitize the URL to be shown as HTML in the popover.

Here is a working example.

angular.module('myApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
  .controller('myCtrl', ['$scope', '$sce', ($scope, $sce) => {
    $scope.isOpen = new Array(2).fill(false);
    $scope.careerAttribute = {
      'title': 'Here is The Title',
      'value': $sce.trustAsHtml('<a target="_blank" href="https://www.google.com">Google</a>')
    };
    
    $scope.open = (popoverId) => {
      $scope.isOpen[popoverId] = true;
    }
    
    $scope.close = (popoverId) => {
      $scope.isOpen[popoverId] = false;
    }
  }]);

[uib-popover-html] {
  margin: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div ng-app="myApp" ng-controller='myCtrl'>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Address</th>
      </tr>
    </thead>
    <tr>
      <td ng-mouseenter="open(0)" ng-mouseleave="close(0)">
        <div uib-popover-html="careerAttribute.value" popover-title="{{careerAttribute.title}}" popover-is-open="isOpen[0]" popover-trigger="'none'" popover-placement="right">
          Hover for Popup
        </div>
      </td>
      <td>India</td>
    </tr>
    <tr>
      <td ng-mouseenter="open(1)" ng-mouseleave="close(1)">
        <div uib-popover-html="careerAttribute.value" popover-title="{{careerAttribute.title}}" popover-is-open="isOpen[1]" popover-trigger="'none'" popover-placement="right">
          Hover for Popup
        </div>
      </td>
      <td>India</td>
    </tr>
  </table>
</div>

Note: I'm not sure why clicking the link does not open it when using the code snippets on StackOverflow (it works on other online code editors) but you can right-click and open in a new tab to see that it works. This is clearly an issue with the snippets itself as even using the link in the HTML directly does not open the link.

Hi Shalini, you don't seem to accept a lot of answers. If this or any answer has solved your question please consider [accepting it](https://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. — nash11, Sep 23 '19 at 15:02
Don't be :) As I said, it's not an obligation but it just helps the community especially when, like in your case, the question is the first of its kind (afaik). — nash11, Sep 25 '19 at 16:22

Angular bootstrap popover disappears when the mouse enters it

1 Answers1