Question

目前我没有使用任何其他插件来获取网格行鼠标悬停的工具提示。我正在使用

$("#list").setCell(rowid,'Name','','',{'title':'my custom tooltip on cell'});

Name是设置工具提示的列名称，rowid标识该行。有关更多信息，请阅读此答案，包括参考文献。

是否有任何外部插件可以实现更好的UI效果。这个工具提示似乎不足以满足我的要求

Answer 1

因为在下一版本的jQuery中将包含Tooltip（请参阅demo），我建议您现在最好从github下载它并稍微玩一下。

我准备the demo更改了网格第二列的工具提示，并使用HTML包含自定义类（我在演示标准ui-state-highlight类中使用）和自定义动画效果（slideUp / slideDown）。所以你会看到关注 alt text

我希望该演示可以帮助您实现自定义工具提示的要求。

Answer 2

也可以使用其他方法。由于许多“花哨”的工具提示基于类定义和jquery，您可以在loadcomplete上加载工具提示相关的类，例如：

$(this).find("td").addClass('gridtip');

我使用了来自Alen Gracalic的非常小而有效的工具提示我称之为悬停事件，如下：

jQuery("#competencegrid").live('hover',function(e){
   gridtip();
});

此外，我确保删除所有以前的标题，以便浏览器内置的工具提示功能不会显示。这也是在loadcomplete之后完成的：

$('[title]').each(function(){
    $this = $(this);
    if($this.attr('title').length>1){
        $.data(this, 'title', $this.attr('title'));
    }
    $this.removeAttr('title');
});

（在Alen Gracalic的原始代码中，删除了title属性，同时显示了工具提示然后恢复。此方法与jqgrid的交互效果不佳。因此最好完全删除它并依赖jquery数据。）

上面对标题长度的检查是我在申请中的特定需求，可以忽略不计。

最后，当在javaclass中加载工具提示时，我指的是jquery数据而不是title属性（因为那个现在是空的）。

this.gridtip = function(){
    xOffset = 15;
    yOffset = 20;
    $(".gridtip").hover(function(e){
        this.t = $.data(this, 'title');
        if(this.t){
            $("body").append("<p id='gridtip'>"+ this.t +"</p>");
            $("#gridtip")
               .css("top",(e.pageY - xOffset) + "px")
               .css("left",(e.pageX + yOffset) + "px")
               .fadeIn("fast");
         }
     },
     function(){
         $("#gridtip").remove();
     });
     $(".gridtip").mousemove(function(e){
         $("#gridtip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
     });
};

非常，但并非必要 - 这就是我的.css课程的样子：

#gridtip{
    position:absolute;
    border:4px solid #adadad;
    background:#fefefe;
    -moz-border-radius: 5px;
    padding:4px 5px;
    color:#666;
    display:none;
    font-size:14px;
    font-family:verdana;
    text-align:left;
    z-index:50;
    filter: alpha(opacity=100);
    opacity:0.85;
}

在我的应用程序中，我没有使用主要字段文本显示为工具提示。相反，我在将标题内容加载到jquery数据之前，用隐藏列中的文本替换标题内容。执行此操作的过程如下所示：

var numberOfRecords = $("#competencegrid").getGridParam("records");
for(i=1;i<=numberOfRecords;i++){
    var rowid = jQuery('#competencegrid tr:eq('+i+')').attr('id');
    var description = $("#competencegrid").jqGrid("getCell",rowid,"competenceDescription");
    if(description.length>0){
        $("#competencegrid").jqGrid('setCell', rowid, "competenceName", '','',{'title':description});
    }
}

Jqgrid上的外部Tooltip插件

2 个答案: