how to display tooltip in ngtable?

Question

I am trying to get a tooltip in my ngtable and using this code:

http://embed.plnkr.co/v6bqqe/index.html

My ngtable looks like this:

 <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'">{{user.name}}</td>
            <td data-title="'Age'">{{user.age}}</td>

            <td data-title="'Comments'">
                <div my-qtip qtip-title="{{user.name}}" qtip-content="{{user.comment}}">
                    hover here
                </div>
            </td>
        </tr>
    </table>

So trying to display the usercomment property as a tooltip. Question is how to display this in the table when hovering over the comments column?

see also plunkr:http://plnkr.co/edit/8zNSsyzbu2Xbda2NIbnK?p=info

Answer 1

You just need a slight change:

http://plnkr.co/edit/eP5fiFrWvcoVveYWAQzr?p=preview

 var text = attrs['qtipContent']; 
 var  title = attrs['qtipTitle'];

Here is the entire directive:

app.directive("myQtip", function () {

    return function (scope, element, attrs) {

      /******* This is what's different from myQtip *********/

        var text = attrs['qtipContent'];

          var  title = attrs['qtipTitle']; 

      /******************************************************/  

        scope.qtipSkin = (attrs.skin ? "qtip-" + attrs.skin : "qtip-dark");

        element.qtip({
            content: {
                text: text,
                title: title
            },

            style: {
                classes: scope.qtipSkin + " qtip-rounded qtip-shadow "
            },
            show: {
                event: 'click mouseover',
                solo: true
            },
            hide: {
                event: (scope.closeButton == true ? "false" : "click mouseleave"),
                delay: 300,
                fixed: (($(this).hover || attrs.fixed) ? true : false),  //prevent the tooltip from hiding when set to true
                leave: false
            },
            position: {
                viewport: $(window),// Keep it on-screen at all times if possible
                target: (attrs.target ? attrs.target :"event"),
                my: "bottom center",
                at:  "top center"
            }
        });

        scope.$on("$destroy", function () {
            $(element).qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements
        });

        $('[my-qtip]').css("display", "inline-block");
    }
});