angularjs - 如何在 ngtable 中显示工具提示？

Question

我正在尝试在我的 ngtable 中获取工具提示并使用以下代码：

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

我的 ngtable 看起来像这样：

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

因此尝试将 usercomment 属性显示为工具提示。问题是当鼠标悬停在评论栏上时如何在表格中显示？

另见 plunkr：http ://plnkr.co/edit/8zNSsyzbu2Xbda2NIbnK?p=info

Answer 1

您只需要稍作改动：

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

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

这是整个指令：

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");
    }
});