Hide tooltip if empty in md-tooltip

Question

I have following tooltip:

<i ng-click="createDetails(item)" class="fa fa-info-circle">
    <md-tooltip md-direction="top">
        {{item.details}}
    </md-tooltip>
</i>

$scope.createDetails = function (item) {
    item["details"] = "example";
}

If i click, details appears (tooltip is not centered, another problem but OK for now)

The main problem is: I want to hide the tooltip if there is no information, so when item.details == undefined

I tried ng-show, md-visible, ng-class etc. Is there a solution for these problem(s)?

Answer 1

You can use ng-if to evaluate content of item.details variable to decide whether <md-tooltip> element is created or not.

<i ng-click="createDetails(item)" class="fa fa-info-circle">
    <md-tooltip md-direction="top" ng-if="item.details">
        {{item.details}}
    </md-tooltip>
</i>