If I had to guess, I'd say that cluetip method is being called before
the element is being modified. Try removing the onload handler from
the body tag and calling mytest() before cluetip within the
document.ready
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Sep 8, 2008, at 2:45 PM, knockknock wrote:
Hi.
I am using the cluetip.js toolbox. It works great in my html (the
first div in my html example below), but if I want to use it from a
javascript file and refer to the html via the DOM it doesn't work
(i.e. the second div in my html example below). I would greatly
appreciate if you could tell me what I am doing wrong. Thanks!
In my html file I have:
-----------------------------------------------------------------------------------------------------
<script src="http://www.google.com/jsapi";></script>
<script> google.load("jquery", "1.2.6"); </script>
<script src="jquery.dimensions.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.js" type="text/javascript"></script>
<!-- optional -->
<script src="jquery.cluetip.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
<body onload="mytest();" >
<div class="houdini" title="Houdini was an escape artist.|He was also
adept at prestidigitation."> Houdini </div>
<div id="sgktest"></div>
-----------------------------------------------------------------------------------------------------
The first div shows the cluetip effects nicely but the second div
shows just a default title display.
My javascript file looks like this:
-----------------------------------------------------------------------------------------------------
$(document).ready(function() {
$('.tips').cluetip();
$('.houdini').cluetip({
splitTitle: '|', // use the invoking element's title attribute to
populate the clueTip...
// ...and split the contents into separate divs
where there is a "|"
showTitle: true // hide the clueTip's heading
});
});
function mytest() {
var testsgk = document.getElementById('sgktest');
testsgk.title="This is a tooltip";
testsgk.className="houdini";
testsgk.textContent="check this out";
}
-----------------------------------------------------------------------------------------------------
