Angular - Dynamic tooltip content

Question

I have the following problem: I want to give content to a tooltip dynamically by executing a function with a param. The key here is that the param has the information I need to change the tooltip content since this tooltip is in a ng-repeat directive.

My html is kinda this:

<div class="module-box highlight clearfix" ng-repeat="request in model.requests.items track by request.id" ng-class="{ 'inactive-section': model.isLoading.value }">
    ...
        <div class="module-column text-center">
                    <h5>REQUEST STATUS</h5>
                    <p>
                        <span data-toggle="tooltip" uib-tooltip="{{request.requestStatus.name}} {{someFunction(request)}}">
                            <i class="fa fa-clock-o fa-lg {{request.requestStatusGroupCssClass}}" aria-hidden="true"></i>
                        </span>
                    </p>
                </div>
    ...
</div>

This html view is has it's own directive called homePendingRequests.js. Then I insert the view in a Home.html page (that has it's controller).

Thanks!!

Answer 1

I just solved it. It works pretty sweet

html directive:

<div class="module-column text-center">
    <h5>ESTADO</h5>
    <p>
        <div ng-mouseenter="tooltipHelper(request)">
            <span data-toggle="tooltip" uib-tooltip="{{msg}}">
                <i class="fa fa-clock-o fa-lg {{request.requestStatusGroupCssClass}}" aria-hidden="true"></i>
            </span>
        </div>
    </p>
</div>

js directive:

    $scope.tooltipHelper = function (request) {
        $scope.msg = request.requestStatus.name;
        if (request.validatorsForPendingStatus) {
            $scope.msg += ' (' + request.validatorsForPendingStatus.validatorsList + ')';
        }
    };

Answer 2

use $copmile(`<div class="module-box highlight clearfix" ng-repeat="request in model.requests.items track by request.id" ng-class="{ 'inactive-section': model.isLoading.value }">
    ...
        <div class="module-column text-center">
                    <h5>REQUEST STATUS</h5>
                    <p>
                        <span data-toggle="tooltip" uib-tooltip="{{request.requestStatus.name}} {{someFunction(request)}}">
                            <i class="fa fa-clock-o fa-lg {{request.requestStatusGroupCssClass}}" aria-hidden="true"></i>
                        </span>
                    </p>
                </div>
    ...
</div>`)($scope)