I am trying to have the full table cell content show as a tooltip. This will let visitors see the part that is hidden since it is too long to fit in the cell.
I am attempting the solution described here (please look there to see expected behavior): http://jsfiddle.net/zWfac/
var container = $("#container");
$("td").hover(function ()
{
container.children(".tooltip").remove();
var element = $(this);
var offset = element.offset();
var toolTip = $("<div class='tooltip'></div>");
toolTip.css(
{
top : offset.top,
left : offset.left
});
toolTip.text(element.text());
container.append(toolTip);
});
I changed the container var definition from an id to a class:
var container = $(".sortTable");
I added the code to our wordpress site by putting it right before </body>
in my child theme's footer.php, inside a jQuery().ready(function()
block.
I am getting an error that leads me to think jQuery is not properly initializing but I am too new to this language to be able to troubleshoot effectively. I'd appreciate any suggestions on this.
I have a sample table on this page: http://frugalmule.com/overflow/
Please note my client previously posted a somewhat incomplete question about this which was removed; I have made many changes to the page since then but I still don't have what he needs. Since the error occurs when putting the JSFiddle to the real site, I don't know how to state the problem in any simpler fashion.