Hi
This post is somewhat related to this one.
In fact, after cleaning up a bit (see below for details of the page source), I've the following error in firebug, on jquery.js v1.3.2 on line 2447 of the unminimized source :
if ( !handler.guid )
firebug tells me "handler is undefined"
This happens everytime I hover some tooltip enabled components, making it quite annoying...
Any hint welcome !
++
joseph
nb : here is my "clean" standalone demo page :
This post is somewhat related to this one.
In fact, after cleaning up a bit (see below for details of the page source), I've the following error in firebug, on jquery.js v1.3.2 on line 2447 of the unminimized source :
if ( !handler.guid )
firebug tells me "handler is undefined"
This happens everytime I hover some tooltip enabled components, making it quite annoying...
Any hint welcome !
++
joseph
nb : here is my "clean" standalone demo page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- The recommended practice is to load jQuery from Google's CDN service. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<!-- Tabs, Tooltip, Scrollable, Overlay, Expose. No jQuery. -->
<script src="http://cdn.jquerytools.org/1.1.1/tiny/jquery.tools.min.js"></script>
<!-- DOCTYPE is always recommended. see: http://www.quirksmode.org/css/quirksmode.html -->
<!--
This is the jQuery Tools standalone demo, the fastest way to get started.
You can freely copy things on your site. All demos can be found here:
http://flowplayer.org/tools/demos/
- css files should not be referenced from flowplayer.org when in production
Enjoy!
-->
<!-- standalone page styling -->
<style>
body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
/* get rid of those system borders being generated for A tags */
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
</style>
<!-- javascript coding -->
<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7,
// use this single tooltip element
tip: '.tooltip'
});
});
</script>
</head>
<!-- without body tag IE may have unprodictable behaviours -->
<body>
<!-- tooltip styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tooltip-generic.css"/>
<style>
#myform {
border:1px outset #ccc;
background:#fff url(http://static.flowplayer.org/img/global/gradient/h600.png) repeat-x;
padding:20px;
margin:20px 0;
width:350px;
-moz-border-radius:4px;
}
#myform h3 {
text-align:center;
margin:0 0 10px 0;
}
/* http://www.quirksmode.org/css/forms.html */
#inputs label, #inputs input, #inputs textarea, #inputs select {
display: block;
width: 150px;
float: left;
margin-bottom: 20px;
}
#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#inputs br {
clear: left;
}
</style>
<div class="tooltip"></div>
<form id="myform" action="#">
<h3>Registration Form</h3>
<div id="inputs">
<!-- username -->
<label for="username">Username</label>
<input id="username" title="Must be at least 8 characters."/><br />
<!-- password -->
<label for="password">Password</label>
<input id="password" type="password" title="Try to make it hard to guess." /><br />
<!-- email -->
<label for="email">Email</label>
<input id="email" title="We won't send you any marketing material." /><br />
<!-- message -->
<label for="body">Message</label>
<textarea id="body" title="What's on your mind?"></textarea><br />
<!-- message -->
<label for="where">Select one</label>
<select id="where" title="Select one of these options">
<option>-- first option --</option>
<option>-- second option --</option>
<option>-- third option --</option>
</select>
<br />
</div>
<!-- email -->
<label>
I accept the terms and conditions
<input type="checkbox" id="check" title="Required to proceed" />
</label>
<p>
<button type="button" title="This button won't do anything">Proceed</button>
</p>
</form>
</body></html>
