如何在angularjs ui网格中添加自定义工具提示 [英] How to add a Custom tooltip in angularjs ui grid

问题描述

我需要我的UI网格来显示自定义的工具提示。通过自定义我的意思是，它应该显示自定义HTML作为悬停任何单元格的工具提示



以下是我的代码部分

I need my UI grid to show a customized tool tip. By customized i mean, it should show a custom HTML as a tooltip on hovering any cell

Below is my part of code

$scope.gridOptions1 = {
       enableSorting: true,
       enableFiltering: true,
       enableHighlighting: true,
      enableColumnResizing: true,
      filterOptions: $scope.filterOptions,
       onRegisterApi: function (gridApi) {
          $scope.grid1Api = gridApi;
       },
      columnDefs: [
       {
           field: 'Name', cellClass: 'cell', minWidth: 170, headerCellClass: 'header', cellTooltip:
       function (row, col) {
           return 'Name: ' + row.entity.Name + 'Desc: ' + row.entity.Description;
           }
       },.....

以上代码帮我展示Name和Description列值作为特定单元格上的工具提示。我想给工具提示某些样式，比如表格结构。

The above code helps me to show the Name and Description column values as a tooltip on a particular cell. I want to give the tooltip certain style, something like a tabular structure.

推荐答案

scope.gridOptions1 = {
enableSorting： true ，
enableFiltering： true ，
enableHighlighting： true ，
enableColumnResizing： true ，
filterOptions：

scope.gridOptions1 = { enableSorting: true, enableFiltering: true, enableHighlighting: true, enableColumnResizing: true, filterOptions:

scope.filterOptions，
onRegisterApi： function （gridApi）{

scope.filterOptions, onRegisterApi: function (gridApi) {

scope.grid1Api = gridApi;
}，
columnDefs：[
{
field：' 名称'，cellClass：' cell'，minWidth： 170 ，headerCellClass：' header'，cellTooltip：
function （row，col）{
return ' 名称：' + row.entity.Name + ' Desc：' + row.entity.Description;
}
}，.....

scope.grid1Api = gridApi; }, columnDefs: [ { field: 'Name', cellClass: 'cell', minWidth: 170, headerCellClass: 'header', cellTooltip: function (row, col) { return 'Name: ' + row.entity.Name + 'Desc: ' + row.entity.Description; } },.....

以上代码帮我展示Name和Description列值作为特定单元格上的工具提示。我想给工具提示某些样式，比如表格结构。

The above code helps me to show the Name and Description column values as a tooltip on a particular cell. I want to give the tooltip certain style, something like a tabular structure.

这篇关于如何在angularjs ui网格中添加自定义工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！