AngularJS Tooltip on ng-repeat

Issue

I need some help with showing a "Tooltip" for AngularJS. The problem is that I have ng-repeat in a table and on some rows I show a button that is supposed to show a tooltip on hover.

The tooltip is showing but the problem is that the tooltip is showing for all rows when I hover on one row. Its maybe better to illustrate on image:

This is my code in controller:

$scope.demo = {
            showTooltip: false,
            tipDirection: 'right'
        };

and if needed this is my table:

<md-card  ng-repeat="container in containers | toArray:false |  filter:searchText.container.name">

    <md-toolbar>
        <div class="md-toolbar-tools">
            <h3>
                <span>{{container.account_name}}</span>
            </h3>
        </div>
    </md-toolbar>

    <md-card-title>
        <table class="table">
            <thead>
            <tr>
                <th>AccountName</th>
                <th>AccountID</th>
                <th>ContainerID</th>
                <th>ContainerName</th>
                <th>Options</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><a href="{{container.tagManagerUrl}}">{{container.account_name }}</a></td>
                <td>{{ container.accountId }}</td>
                <td>{{ container.containerId }}</td>
                <td ng-if="!container.missing_live"><a href="/gui/tags/{{container.path}}">{{container.name}}</a></td>
                <td ng-if="container.missing_live">{{container.name}}


                    <md-tooltip md-visible="demo.showTooltip">Missing Live Container</md-tooltip>
                    <ng-md-icon icon="warning" size="20" style="fill: #ffd600"></ng-md-icon>


                </td>




                <td> <md-button class="md-icon-button" aria-label="More">
                    <ng-md-icon icon="more_vert"></ng-md-icon>
                </md-button></td>
            </tr>
            </tbody>
        </table>
    </md-card-title>
</md-card>

This is the line of tooltip in the table:

 <md-tooltip md-visible="demo.showTooltip">Missing Live Container</md-tooltip>
                    <ng-md-icon icon="warning" size="20" style="fill: #ffd600"></ng-md-icon>

So my goal is to show only the tooltip which the user hovers over. Not all in table. Thanks

Solution

add showTooltip to the container object.

<md-toolbar>
    <div class="md-toolbar-tools">
        <h3>
            <span>{{container.account_name}}</span>
        </h3>
    </div>
</md-toolbar>

<md-card-title>
    <table class="table">
        <thead>
        <tr>
            <th>AccountName</th>
            <th>AccountID</th>
            <th>ContainerID</th>
            <th>ContainerName</th>
            <th>Options</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><a href="{{container.tagManagerUrl}}">{{container.account_name }}</a></td>
            <td>{{ container.accountId }}</td>
            <td>{{ container.containerId }}</td>
            <td ng-if="!container.missing_live"><a href="/gui/tags/{{container.path}}">{{container.name}}</a></td>
            <td ng-if="container.missing_live">{{container.name}}


                <md-tooltip md-visible="container.showTooltip">Missing Live Container</md-tooltip>
                <ng-md-icon icon="warning" size="20" style="fill: #ffd600"></ng-md-icon>


            </td>




            <td> <md-button class="md-icon-button" aria-label="More">
                <ng-md-icon icon="more_vert"></ng-md-icon>
            </md-button></td>
        </tr>
        </tbody>
    </table>
</md-card-title>

Answered By - zabusa