Question

在搜索了如何为JsGrid创建正确的工具提示后，我创建了以下版本：

headerTemplate: function() { 
    return $("<div>").text(this.title)
         .append('<div class="tooltip"><img height="20" width="20" id="tooltip" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-help-outline-128.png" /><span class="tooltiptext">Tooltip text</span></div>');

然而，目前这个工具提示的主要问题是当你有一个非常长的工具提示时，由于overflow-x: hidden和overflow-y:scroll，它将被JsGrid标题切断。

出于这个原因，我已将工具提示的位置放在position:absolute上，但这会导致网格不能完全适合屏幕，工具提示位于错误的位置。

我发现当你的<div>元素周围有position:relative overflow时，你可以推翻它，然后在其中加position: absolute div 。但是，由于网格完全是从Javascript生成的，我想知道是否有其他方法可以执行此操作，或者是否必须修改JsGrid生成。

完整示例可在以下位置找到： https://jsfiddle.net/SlowFing/1hx84hv7/

Answer 1

您需要创建标题单元格position:relative，然后绝对是工具提示。请尝试这些更改.. https://jsfiddle.net/1hx84hv7/12/

<强> CSS

.jsgrid-header-cell {
    position:relative;
}

.tooltip {
   position: absolute;
   display: inline-block;
   border-bottom: 1px dotted black;
}

.tooltip .tooltiptext::after {
   content: "";
   position: absolute;
   top: 10%;
   right: 100%;
   margin-top: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: transparent black transparent transparent;
}

Answer 2

这对我有用：

headerTemplate: function () {
    var TdObj = $('<th class="text-center"></th>')
    return TdObj.prop("title","boo" ).text("column title");
}

带有工具提示的

2 个答案: