如何在工具提示具有html内容的情况下显示引导工具提示动态数据

Question

我正在尝试从工具提示中的网格加载数据。一旦用户将鼠标悬停在ui-grid的第一列上，就会生成此工具提示。我想使用引导程序，并且根据需要显示工具提示的html。我尝试了几种方法，但是现在没有显示数据。 请看所附图片。我想要{{row.entity.Status}}

的实际值

请参阅当前代码以供参考    https://codepen.io/brainzest/pen/bmqgLy?editors=0011

angular.module('GridDemo', ['ngTouch', 'ui.grid', 'ui.grid.cellNav', 'ui.grid.pinning']).controller('MainCtrl', function($scope,uiGridConstants,$sce){


$scope.equipData = [
{ Status: "Maintenance",
  PackageName: "Package 1",
  Hours: "15,000",
  },
{ Status: "Running",
  PackageName: " Package 2",
  Hours: "15,000",
 },
{ Status: "Running",
  PackageName: "Package 3",
  Hours: "15,000",
},
    { Status: "Running",
      PackageName: "Package 4",
      Hours: "15,000",
      },  


    ];


 $scope.gridOptions = {
    enableSorting: true,
    enableColumnResizing : true,
    enableColumnMenus:false,
    columnDefs: [{ field: 'PackageName', cellTemplate:'<div data-toggle="tooltip" title="\<table class=table-borderless><tbody><tr><td class=gray>Status</td><td class=yell>Data 2</td></tr><tr><td class=gray>Status</td><td class=yell>{{row.entity.Status}}</td></tr></tbody></table>" data-html="true" data-placement="right" ><div class="ui-grid-cell-contents">{{ COL_FIELD }}</div></div>'},
      { field: 'Hours'}],
   data:$scope.equipData

   };

 }).directive('toggle', function(){
 return {
   restrict: 'A',
    link: function(scope, element, attrs){
          if (attrs.toggle=="tooltip"){

           $(element).tooltip();
         }

     }
  };
});

Answer 1

如果您正在寻找更棱角分明的东西，则应采用以下方式：

<div class="grid-tooltip" tooltip="{{row.entity.Status}}" tooltip-placement="left">
   <div class="ui-grid-cell-contents">
   {{ COL_FIELD }}
   </div>
</div>