We help IT Professionals succeed at work.

Javascript how to pop up tip onMouseover event using element attribute

jetbet
jetbet asked
on
1,493 Views
Last Modified: 2012-06-21
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"?>
<HTML>
<head>
<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>
</head>
<body ..........
 
............
<tr>
<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

Comment
Watch Question

CERTIFIED EXPERT

Commented:
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

Author

Commented:
This works well apart from the font size which is an issue.
Can this be defined in a style sheet etc?
CERTIFIED EXPERT

Commented:
You could also use CSS to make custom tooltips, which is way better than using JS because you can change the style easily.
http://www.associatedcontent.com/article/496555/how_to_create_custom_tooltips_with.html?cat=59

If you want a JS solution instead, let me know and I'll see what I can cook up.

Author

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

<tr>
<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

a.info span {
display: none;
}

a.info:hover {
position: relative;
}

a.info:hover span {
display:block;
position:absolute;
border:thin solid black;
background-color:yellow;
font-size:20pt;
font-weight:600;
}

but this does not work(size remains the same)
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
You cannot style the TITLE attribute

Author

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?
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Yes, good old walter would have been my suggestion had I been around earlier. Good find

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.