html - 当我们悬停在表格行上时弹出数据

Question

我正在尝试显示一个弹出窗口，其中包含表格行中的数据，如 URL (CS WHOLESALE GROCERS) 中显示的图像。

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

我在我的 Controller 中添加了以下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>