CODEWITHSUNDEEP
angularjstwitter-bootstraptooltip
user2361494
user2361494

Reputation: 161

Get DB data and fill the title attribute for tooltip in Angularjs

I am struggling on how the bootstrap tooltip's title attribute's text data can be retrieved and shown through the captured data from database.

I have already captured the row data for my table using $http and correctly show my table data, I want to use the data as my tooltip data too

enter image description here

Here, I can successfully use ng-repeat to loop through my rowData, but my rowData also contains the tooltip data for each td, how can I modify the tooltip text attribute in order to show tooltip data?

The following is my controller on how to get the rowData enter image description here

Thanks all for the kind help

Sorry for missing some info, I actually write a directive specifically for the tooltip as follows enter image description here

The cellData variable is from the rowData which is come from the pData, the pData comes from the data read from DB using GET method

Upvotes: 0

Views: 821

Answers (1)

Sudarshan Kalebere
Sudarshan Kalebere

Reputation: 3929

I think the issue is with nested ng-repeat & their $scope, but if the data is coming in your tr td then you need to work little different to get your tooltip. I am providing you a simple tooltip example see if you can modify your code according to it, It works with BS tooltip. below i have pasted my code, also see this demo demo

html code
<body ng-app="myApp">
    <table class="table" ng-controller="ctrl">
        <thead>
            <tr><th>column</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <span tooltip="that">this</span>
                </td>
            </tr>
            <tr ng-repeat="foo in bar">
                <td><span tooltip="{{foo.tooltip}}">{{foo.content}}</span></td>
            </tr>
        </tbody>
    </table>
</body> 

app.js
var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('ctrl', ['$scope', function ($scope) {
    $scope.bar = [];
    // doing something async (exec time simulated by setTimeout)
    myAsyncFunc(function (bar) {

        $scope.$apply(function() {
             $scope.bar = bar;
        });
    });

}]);

var myAsyncFunc = function (done) {
    // simulate some kind of timeout due to processing of the function
    setTimeout(function () {
        return done([{tooltip: 'this is the tooltip', content: 'this is the content'}]);
    }, 500);
};

Upvotes: 1

Related Questions