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 =＆＃34; auto right＆＃34;但这也使得其他专栏的位置更加糟糕。

也试过这个：

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
 };

工具提示在“angular-ui-grid”

1 个答案: