Css Hover Tooltip doesn't work in JqGrid - css

Question

I have a css tooltip that I use to provide guidance, and I'm trying to include it in the jqgrid.
However, the title of the column appears on hover. The <span> does not. I tried adding title:false, but then nothing happens.
Here's the css I'm using:
.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; }
And here's how it's applied:
<a class='tooltip' href='#'>
<img alt='Help' src='/Images/question_mark_sm.png' />
<span class='tooltip_classic info'>Guidance Tag</span>
</a>
Not sure why it will work anywhere else but in the jqGrid. I've tried and tried, but it doesn't seem to work. (Well, the image shows up and the cursor changes, but no popup.)

Answer 1

Try to remove tooltip attribute from a jqGrid cell.
For me it works fine for all the browsers, except IE7. I used jqGrig gridComplete event.
Here is an example:
// _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
}
});