2

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

4

1 に答える 1

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");
    }
});
于 2014-06-25T01:28:26.583 に答える