?
Solved

Javascript how to pop up tip onMouseover event using element attribute

Posted on 2009-05-05
8
Medium Priority
?
1,365 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

0
Comment
Question by:jetbet
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
  • 2
8 Comments
 
LVL 14

Expert Comment

by:sam2912
ID: 24310598
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

0
 

Author Comment

by:jetbet
ID: 24310711
This works well apart from the font size which is an issue.
Can this be defined in a style sheet etc?
0
 
LVL 14

Expert Comment

by:sam2912
ID: 24310802
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.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:jetbet
ID: 24310943
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)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24312028
You cannot style the TITLE attribute
0
 

Author Comment

by:jetbet
ID: 24318725
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?
0
 

Accepted Solution

by:
jetbet earned 0 total points
ID: 24320668
Solution Found
I am using wz_tooltips.js from

http://www.walterzorn.com/tooltip/tooltip_e.htm

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>
.....
<tr>
<th class="will_pay_header" onMouseOver="TagToTip('Span1', FONTSIZE, '16pt', ABOVE, true)">
<a>1
<span id="Span1">Mr Cool</span>
</a>
</th>
<th class="will_pay_header" onMouseOver="TagToTip('Span2', FONTSIZE, '16pt', ABOVE, true)">
<a>2
<span id="Span2">Sir Dobrim</span>
</a>
</th>
<th class="will_pay_header" onMouseOver="TagToTip('Span3', FONTSIZE, '16pt', ABOVE, true)">
<a>3
<span id="Span3">Battle Cheif</span>
</a>
</th>
etc

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24320835
Yes, good old walter would have been my suggestion had I been around earlier. Good find
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question