Hi,
I'm starting to pull my hair out.
jquery-tooltips is just not working, no matter what I try, it seems. Any help that anybody could give would be very much appreciated!
It's used in a form (although it's only used in divs, not by the form elements themselves). FYI, there is a lot of other javascript that the form needs to run. All of other javascript works perfectly. But the tooltip does nothing... nothing at all. I mouse-over the text, and nothing happens. No error, no tooltip, nothing.
I have tried commenting out all of the window.onload stuff, to no effect (except, of course, that the other stuff I need to run doesn't run).
I initially tried using local copies of the jquery-tooltip code, but switched to calling from the original website after it didn't work with the local copy.
All of the function code and other stuff that should be totally irrelevant has been removed, so that there isn't a mountain of code to weed through. I left the wrappers, though, just in case... hence all of the empty functions.
I'm testing in FF 10.0, and this is an asp page on my local machine (because it's still being tested). All of the demo pages that I've Googled about jQuery-tooltips work properly, so it seems it's not a browser issue.
Thanks again!
Code:
And here's the CSS (located in forms.css):
Katie
I'm starting to pull my hair out.
jquery-tooltips is just not working, no matter what I try, it seems. Any help that anybody could give would be very much appreciated! It's used in a form (although it's only used in divs, not by the form elements themselves). FYI, there is a lot of other javascript that the form needs to run. All of other javascript works perfectly. But the tooltip does nothing... nothing at all. I mouse-over the text, and nothing happens. No error, no tooltip, nothing.
I have tried commenting out all of the window.onload stuff, to no effect (except, of course, that the other stuff I need to run doesn't run).
I initially tried using local copies of the jquery-tooltip code, but switched to calling from the original website after it didn't work with the local copy.
All of the function code and other stuff that should be totally irrelevant has been removed, so that there isn't a mountain of code to weed through.
I left the wrappers, though, just in case... hence all of the empty functions.I'm testing in FF 10.0, and this is an asp page on my local machine (because it's still being tested). All of the demo pages that I've Googled about jQuery-tooltips work properly, so it seems it's not a browser issue.
Thanks again!
Code:
Code:
<?xml version="1.0" encoding="windows-1252"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html[/URL] xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
<script type="text/javascript">
<!--
var invalids = "!%&*()-+,';\"\\"
function getRadioVal(rb){
}
function isLegal(txt) {
}
function alertInvalidChar(sField) {
}
// -->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Title</title>
<link href="stylesheets/style.css" rel="stylesheet" type="text/css" />
<link href="stylesheets/dotcomstyle.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/gif" href="images/icon.gif">
<link rel="stylesheet" href="javascript/jquery-tooltip/jquery.tooltip.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/forms.css" type="text/css" />
<style type="text/css">
/* some irrelevant styles were here */
</style>
<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>[/URL]
<script src="[URL unfurl="true"]http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>[/URL]
<script type="text/javascript">
<!--
// validate the form before submitting
function validate()
{
}
// stuff specific to this registration form
function FeeOptionSelect(iID)
{
}
function P1FeeOptionSelect(iID)
{
}
function P2FeeOptionSelect(iID)
{
}
function EventOption1Select(iID)
{
}
function EventOption2Select(iID)
{
}
function EventOption3Select(iID)
{
}
//Automatically load when the page is loaded
function my_init()
{
FeeOptionSelect(7);
P1FeeOptionSelect(0);
P2FeeOptionSelect(0);
EventOption2Select(0);
}
function WindowOnload(oNewOnloadFunction) {
var oPreviousOnloadFunction = window.onload;
window.onload = function() {
if (oPreviousOnloadFunction) { oPreviousOnloadFunction(); }
oNewOnloadFunction();
}
}
WindowOnload ( my_init );
// -->
</script>
<script>
// Popups (using the jquery-tooltips plugin)
// Note: I tried calling with double-quotes, single-quotes, $, jQuery('.sessionitem'), and (document).ready
$('.sessionitem').tooltip({
track: true,
delay: 0,
showURL: false,
showBody: " : ",
extraClass: "pretty",
fixPNG: true,
opacity: 0.95,
left: -120
});
</script>
</head>
<body>
<div id="container">
<form id="regform" action="sample.asp" method="post" onsubmit="return validate();">
<table id="formtable" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td colspan="2">
<div class="sessionitem">This is a test</div>
<div class="tooltip">
<h3>short test</h3>
<div>this is a short test with a whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole whole lot of text</div>
<div>...and another line</div>
</div>
</td>
</tr>
</table>
</form>
</div></body></html>And here's the CSS (located in forms.css):
Code:
div.sessionitem
{
margin-bottom:3px;
overflow:hidden;
}
/* mouseover state */
div.sessionitem:hover {
background-position:0 -44px ;
}
/* clicked state */
div.sessionitem:focus {
background-position:0 -88px;
}
/* tooltip styling */
.tooltip {
display:none;
background:url([URL unfurl="true"]http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);[/URL]
height:163px;
padding:40px 30px 10px 30px;
width:310px;
font-size:11px;
color:#fff;
}
.tooltip h3 {
margin-bottom: 0.75em;
font-size: 12pt;
width: 220px;
text-align: center;
}
.tooltip div { width: 310px; text-align: left; }Katie