Question

我正在尝试弹出一个表格行中的数据，就像URL（CS WHOLESALE GROCERS）中显示的图像一样。

https://lh6.googleusercontent.com/IhrfCsZ55PsmaxVpT8N1TIep-92eSZb5lWRx11WrVzS55CNwybtARfFIaMIXbUKd5LS1T1hOL1LVsEtRkuyazpNP_dI=w1342-h519

我在控制器中添加了以下angularjs代码

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            $(element).hover(function(){
                // on mouseenter
                $(element).tooltip('show');
            }, function(){
                // on mouseleave
                $(element).tooltip('hide');
            });
        }
    };
});

并在我的html中添加了这个。

<div class="col-sm-2 tabularData" data-toggle="tooltip" data-placement="bottom">
                            <dl class="dl-horizontal">
                                <dt>Status</dt>
                                <dd>{{bookingData.status}}</dd>
                                <dt>Trade</dt>
                                <dd>{{bookingData.trade}}</dd>
                                <dt>{{customerOrBooking}}</dt>
                                <dd>{{bookingData.bookingCsr}}</dd>
                                <dt>L/D Svc</dt>
                                <dd>{{bookingData.serviceType}}</dd>

                            </dl>
                        </div>

但我没有像我的图片那样得到输出。

Answer 1

调用此jquery：

$(function () {
   $('.subitem').attr('title', $('.statusRollup').remove().html())
   $(document).tooltip();
});

现在改变你的Div

<div class="item">
<div class="subitem col-sm-2 tabularData" data-toggle="tooltip" data-placement="bottom">Hello</div>    
</div>

 <dl class="statusRollup dl-horizontal">
      <dt>Status</dt>
                                <dd>{{bookingData.status}}</dd>
                                <dt>Trade</dt>
                                <dd>{{bookingData.trade}}</dd>
                                <dt>{{customerOrBooking}}</dt>
                                <dd>{{bookingData.bookingCsr}}</dd>
                                <dt>L/D Svc</dt>
                                <dd>{{bookingData.serviceType}}</dd>
 </dl>

当我们将鼠标悬停在表格行上时弹出数据

1 个答案: