工具提示在“ angular-ui-grid”中无法正常工作

Question

我使用的angular-ui-grid v3.0.0-rc.22-e8fe073和bootstrap与网格内的工具提示ui.bootstrap 。

请在下面找到以下工具提示模板：

var templateWithTooltip = '<div class="ui-grid-cell-contents"><a tooltip=\'{{COL_FIELD CUSTOM_FILTERS}}\' tooltip-append-to-body="true" tooltip-placement="right" style="text-decoration:none;top:0!important; white-space:pre;max-width:none;">{{ COL_FIELD CUSTOM_FILTERS }}</a></div>';

并将其在网格中用作cellTemplate: templateWithTooltip 。 并在CSS中：

.tooltip-inner{
        word-wrap: break-word;
    }

工具提示对除最后一列以外的所有列均适用。 请找到以下以1680x1050分辨率拍摄的屏幕截图：

我尝试使用`tooltip-placement =“ auto right”，但这也使其他列的位置更糟。

也尝试过这个：

cellClass: 'cellToolTip'

和

.cellToolTip {
    overflow: visible;
}

更新：

是否可以调用一个函数来将位置名称分配给tooltip-placement属性？ 像这样：

    $scope.fnGetTooltipPosition = function (context, source) {        
            var position = $(source).position();
            /*if (position.left > 1600) {
                return "left";
            }
            if (position.left < 1200) {
                return "left";
            }
            if (position.top < 1050){
                return "left";
            }*/
            return "left";
        }

var templateWithTooltip = '<div class="ui-grid-cell-contents"><a tooltip=\'{{COL_FIELD CUSTOM_FILTERS}}\' tooltip-append-to-body="true" tooltip-placement={{fnGetTooltipPosition()}} style="text-decoration:none;white-space:pre;max-width:none;">{{ COL_FIELD CUSTOM_FILTERS }}</a></div>';

我在上面尝试过，但是工具提示总是放在最前面。 如果可以做到，那么我认为我们可以根据分辨率为工具提示找到正确的位置。

更新2

是否可以为每个单元格调用一个函数以获取其位置并分别应用工具提示位置？ 如何为网格中的每个单元格调用函数？

如果工具提示的内容与屏幕分辨率不匹配，是否可以在最后一列的底部或左侧显示工具提示？ 如何正确显示网格的最后一列的工具提示？

Answer 1

是的，可以调用一个函数并确定将工具提示放在何处。

CellTemplate：

'<div class="ui-grid-cell-contents"><a tooltip=\'{{COL_FIELD CUSTOM_FILTERS}}\' tooltip-append-to-body="true" tooltip-placement={{grid.appScope.fnGetTooltipPosition(row)}} style="text-decoration:none;white-space:pre;max-width:none;">{{ COL_FIELD CUSTOM_FILTERS }}</a></div>'

然后在控制器中定义一个函数以获取位置。

功能：

 $scope.fnGetTooltipPosition= function(row) {
     var index = $scope.gridOptions.data.indexOf(row.entity);
     //Check here whether index is equal to the (arrayLength-1), and return position
 };