I need to display a pop-up with data from a table row, similar to the image at this URL for CS WHOLESALE GROCERS.
I've implemented the following AngularJS code in my controller:
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');
});
}
};
});
and included it in my 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>
Unfortunately, the output I'm getting is not matching the image I have in mind.