CODEWITHSUNDEEP
javascriptjqueryangularjstooltipangular-material
Asqan
Asqan

Reputation: 4489

Hide tooltip if empty in md-tooltip

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)?

Upvotes: 5

Views: 3586

Answers (1)

Naigel
Naigel

Reputation: 9644

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>

Upvotes: 5

Related Questions