I've been working on a tooltip feature that displays data in a message box when hovering over an icon based on its attribute. The following code is implemented for the mouseenter event.
<span class='csTip fa fa-info-circle' csTipTerm='Agreed Bid' ></span>
When I place it independently, it works as expected. However, when I include it inside a TH element within a table tag, the hover event does not work. Here is the code after placing it inside the th element.
<th>Agreed Bid <span class='csTip fa fa-info-circle' csTipTerm='Agreed Bid' ></span> </th>
Here is the associated script:
$(".csTip").mouseenter(function () {
var element = $(this);
var term = element.attr("csTipTerm");
$.ajax({
url: "/api/help/gettipdetails",
dataType: "json",
data: {
tipTerm: term
},
success: function (result) {
var offsets = element.offset();
var posTop = offsets.top;
var posLeft = offsets.left;
HelpBox(result.TipID, result.TipTitle, result.HelpDescriptionHTML, { left: posLeft, top: posTop - 200 });
}
});
});
Can anyone provide guidance on this issue?