Question

我有一个用于提供指导的css工具提示，我正在尝试将其包含在jqgrid中。

但是，列的标题会在悬停时显示。 <span>没有。我尝试添加title:false，但后来没有任何反应。

这是我正在使用的CSS：

.tooltip { border-bottom:1px dotted #000000; outline:none; text-decoration:none; cursor:help; }
.tooltip:hover em { padding: .2em 0 .6em 0; font-weight:bold; display:block; }
.tooltip { position:relative; }
.tooltip:hover span { position:absolute; left:1em; top:-4.5em; z-index:99; margin-left:0; width:150px; }
.tooltip:hover em { border:0; margin: -10px 0 0 -55px; float:left; position:absolute; }
.tooltip span { margin-left:-999em; position:absolute; }

以下是它的应用方式：

    <a class='tooltip' href='#'>
<img alt='Help' src='/Images/question_mark_sm.png' />
<span class='tooltip_classic info'>Guidance Tag</span>
</a>

不确定为什么它会在jqGrid中的其他任何地方工作。我已经尝试过，但似乎没有用。（好吧，图像显示，光标改变，但没有弹出窗口。）

Answer 1

尝试从jqGrid单元格中删除工具提示属性。

对我来说，它适用于所有浏览器，IE7除外。我使用了jqGrig gridComplete事件。

以下是一个例子：

// _YourColID is you column name from colModel
$("td[aria-describedby*=_YourColID]", "#yourGridID tr").removeAttr("title");
$("td[aria-describedby*=_YourColID]", "#yourGridID tr").tooltip({

  // each trashcan image works as a trigger
  tip: '.tooltip',

  // custom positioning
  position: 'center right',                 

  // move tooltip a little bit to the right
  offset: [0, -10],                 

  // there is no delay when the mouse is moved away from the trigger
  delay: 0,                 
  predelay: 2000,                   
  onShow: function(e){
    if ($(e.target).parent("tr").attr('id') != -1) {
      yourTooltipFunction($(e.target).parent("tr").attr("id"));
    }
  }
}).dynamic({
  bottom: {
    direction: 'down',
    bounce: true
  }
});

Css Hover Tooltip在JqGrid中不起作用

1 个答案: