Solved

Javascript how to pop up tip onMouseover event using element attribute

Posted on 2009-05-05
8
1,348 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

705 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