Can anyone help me troubleshoot why my CSS tooltip isn't working correctly? I've been trying to create a simple method for tooltips, but they are displaying inconsistently across different browsers. In Firefox, the tooltips appear in random locations, and in IE, only the first tooltip is functioning properly.
Any assistance would be greatly appreciated. Thank you!
</html>
</head>
<title> Sample CSS Tooltip Test </title>
<style type="text/css">
body {padding: 0px; margin: 0px; font: 80%; font-family: sans-serif;}
div.container {padding: 10px 10px 10px 25px; }
thead {background-color: #00f; color: #fff;}
th { text-align: center; padding: 4px 6px 4px 6px; }
td { text-align: center; padding: 4px 6px 4px 6px; }
a:link {text-decoration: none;}
a:hover {text-decoration: none;}
a:visited {text-decoration: none;}
a.myLink {position: relative; z-index: 24;}
a.myLink:hover {z-index: 25;}
a.myLink span.tooltip {display: none;}
a.myLink:hover span.tooltip {display: block; position: absolute; overflow: visible; top: 0em; left: 8em; width: 20em; color: #fff; background-color: #000; border: solid 1px #c6d880; padding: 2px 4px 2px 4px; font-family: serif; font-size: 1em; font-weight: 700; text-align: left; z-index: 100;}
td.myCell {position: relative; z-index: 24;}
td.myCell:hover {z-index: 25;}
td.myCell span.tooltip {display: none;}
td.myCell:hover span.tooltip {display: block; position: absolute; overflow: visible; top: 0em; left: 8em; width: 20em; color: #fff; background-color: #000; border: solid 1px #c6d880; padding: 2px 4px 2px 4px; font-family: serif; font-size: 1em; font-weight: 700; text-align: left; z-index: 100;}
button.myButton {position: relative; z-index: 24;}
button.myButton:hover {z-index: 25;}
button.myButton span.tooltip {display: none;}
button.myButton:hover span.tooltip {display: block; position: absolute; overflow: visible; top: 0em; left: 8em; width: 20em; color: #fff; background-color: #000; border: solid 1px #c6d880; padding: 2px 4px 2px 4px; font-family: serif; font-size: 1em; font-weight: 700; text-align: left; z-index: 100;}
</style>
</head>
<body>
<div class="container">
<table border="1">
<thead>
<tr><th> Sample Table with CSS Tooltips </th></tr>
</thead>
<tbody>
<tr><td><a class="myLink" href="http://www.google.com/" target="_blank"><span class="tooltip">this is a tooltip for cell 1</span>Visit Google</a></td></tr>
<tr><td class="myCell"><span class="tooltip">this is a tooltip for cell 2</span>Second Cell</td></tr>
<tr><td><button class="myButton" type="submit"><span class="tooltip">this is a tooltip for cell 3</span>Clickable Button</button></td></tr>
</tbody>
</table>
</div>
</body>
</html>