Javascript how to pop up tip onMouseover event using element attribute

I have a HTML page that contains tables.
Each th element in he table header row has an attribute called "name". I want to pop up a tip showning this value when the element is moused over in Firefox.
Can someone please tell me what is wrong with my code

I also want to hide the hint after the mouse moves from the field but have not tried coding this yet
<?xml version="1.0"?>
<META http-equiv="Content-Type" content="text/html"></META>
<title>Will Pay</title>
<META http-equiv="refresh" content="5"></META>
<LINK rel="stylesheet" type="text/css" href="scratchings.css"></LINK>
<script language="JavaScript"></script>
<body ..........
<th class="will_pay_header" name="Born To Race" onmouseover="Tip(this.getAttribute('name')">1</th>
<th class="will_pay_header" name="Four Carat" onmouseover="Tip(this.getAttribute('name')">2</th>

Open in new window

Who is Participating?
jetbetConnect With a Mentor Author Commented:
Solution Found
I am using wz_tooltips.js from

then I can get whatever size, color, position etc I want easily

<body class="will-pay-page"><script type="text/javascript" src="wz_tooltip.js"></script>
<th class="will_pay_header" onMouseOver="TagToTip('Span1', FONTSIZE, '16pt', ABOVE, true)">
<span id="Span1">Mr Cool</span>
<th class="will_pay_header" onMouseOver="TagToTip('Span2', FONTSIZE, '16pt', ABOVE, true)">
<span id="Span2">Sir Dobrim</span>
<th class="will_pay_header" onMouseOver="TagToTip('Span3', FONTSIZE, '16pt', ABOVE, true)">
<span id="Span3">Battle Cheif</span>

Open in new window

Samuel LiewCommented:
You can use the title attribute.
<th class="will_pay_header" name="Born To Race" title="Born To Race">1</th>
<th class="will_pay_header" name="Four Carat" title="Four Carat">2</th>

Open in new window

jetbetAuthor Commented:
This works well apart from the font size which is an issue.
Can this be defined in a style sheet etc?
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Samuel LiewCommented:
You could also use CSS to make custom tooltips, which is way better than using JS because you can change the style easily.

If you want a JS solution instead, let me know and I'll see what I can cook up.
jetbetAuthor Commented:
Could you please give an example of how the <th> element should now look, I have tried several ways to get this to work ie

<a class="info"><span><th class="will_pay_header" title="Mr Cool">1</th></span></a>
<a class="info"><span><th class="will_pay_header" title="Sir Dobrim">2</th></span></a>

and have defined span {
display: none;
} {
position: relative;
} span {
border:thin solid black;

but this does not work(size remains the same)
Michel PlungjanIT ExpertCommented:
You cannot style the TITLE attribute
jetbetAuthor Commented:
Thanks for that.

So I am back to trying to find a Javascript solution.
Did you look at my original question and have any idea what I am missing to get the "Tip" function working?
Michel PlungjanIT ExpertCommented:
Yes, good old walter would have been my suggestion had I been around earlier. Good find
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.