To achieve this, simply remove the popover-append-to-body attribute. By doing so, the popover will be appended to the current element instead. Instead of relying on the default popover-trigger, we can manually control the opening and closing of the popover from the parent element td. To do this, set the popover-trigger to none and use ng-mouseenter and ng-mouseleave on the parent to trigger the popover manually using popover-is-open. Keep track of open popovers by using an array. Additionally, ensure to properly sanitize the URL that will be displayed as HTML content in the popover.
Below is a functional 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>
Please Note: If clicking the link does not work within the code snippets on StackOverflow (while it works on other online code editors), you can right-click and open it in a new tab to verify functionality. This issue seems to stem from the snippets themselves, as even using the link directly in the HTML does not yield the expected result.