CODEWITHSUNDEEP
javascriptangularjsangular-ui-bootstrap
Shalini Garg
Shalini Garg

Reputation: 137

Angular bootstrap popover disappears when the mouse enters it

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.

Upvotes: 1

Views: 1351

Answers (1)

nash11
nash11

Reputation: 8650

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.

Upvotes: 1

Related Questions