Tooltip follow cursor

I’ve been working on modifying a few pop-up tooltips to fit my needs. I started working with BubbleTooltips (http://web-graphics.com/mtarchive/BubbleTooltips.html) but that was pretty limited for what I wanted to use it for.
I came across Sweet Titles (http://www.dustindiaz.com/sweet-bubbles/) which seems to better suit my needs however, I've been trying to get the tooltip to follow the cursor according to x,y positioning in sweet titles like it does in bubble tooltips.

I changes the xCord : 0 and the yCord : 0 to yes, true and 1 but neither worked

Any help would be appreciated.

var sweetTitles = {
xCord : 0, // @Number: x pixel value of current cursor position
yCord : 0, // @Number: y pixel value of current cursor position
tipElements : ['a','abbr','acronym'], // @Array: Allowable elements that can have the toolTip
obj : Object, // @Element: That of which you're hovering over
tip : Object, // @Element: The actual toolTip itself
active : 0, // @Number: 0: Not Active || 1: Active
init : function() {
if ( !document.getElementById ||
!document.createElement ||
!document.getElementsByTagName ) {
return;
}
var i,j;
this.tip = document.createElement('div');
this.tip.id = 'toolTip';
document.getElementsByTagName('body')[0].appendChild(this.tip);
this.tip.style.top = '0';
this.tip.style.visibility = 'hidden';
var tipLen = this.tipElements.length;
for ( i=0; i<tipLen; i++ ) {
var current = document.getElementsByTagName(this.tipElements[i]);
var curLen = current.length;
for ( j=0; j<curLen; j++ ) {
addEvent(current[j],'mouseover',this.tipOver);
addEvent(current[j],'mouseout',this.tipOut);
current[j].setAttribute('tip',current[j].title);
current[j].removeAttribute('title');
}
}
},
updateXY : function(e) {
if ( document.captureEvents ) {
sweetTitles.xCord = e.pageX;
sweetTitles.yCord = e.pageY;
} else if ( window.event.clientX ) {
sweetTitles.xCord = window.event.clientX+document.documentElement.scrollLeft;
sweetTitles.yCord = window.event.clientY+document.documentElement.scrollTop;
}
},
tipOut: function() {
if ( window.tID ) {
clearTimeout(tID);
}
if ( window.opacityID ) {
clearTimeout(opacityID);
}
sweetTitles.tip.style.visibility = 'hidden';
},
checkNode : function() {
var trueObj = this.obj;
if ( this.tipElements.inArray(trueObj.nodeName.toLowerCase()) ) {
return trueObj;
} else {
return trueObj.parentNode;
}
},
tipOver : function(e) {
sweetTitles.obj = this;
tID = window.setTimeout("sweetTitles.tipShow()",15);
sweetTitles.updateXY(e);
},
tipShow : function() {
var scrX = Number(this.xCord);
var scrY = Number(this.yCord);
var tp = parseInt(scrY+15);
var lt = parseInt(scrX+10);
var anch = this.checkNode();
var addy = '';
var access = '';
if ( anch.nodeName.toLowerCase() == 'a' ) {
addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25)+"..." : anch.href);
var access = ( anch.accessKey ? ' <span>['+anch.accessKey+']</span> ' : '' );
} else {
addy = anch.firstChild.nodeValue;
}
this.tip.innerHTML = "<p>"+anch.getAttribute('tip')+"<em>"+access+addy+"</em></p>";
if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) < parseInt(this.tip.offsetWidth+lt) ) {
this.tip.style.left = parseInt(lt-(this.tip.offsetWidth+10))+'px';
} else {
this.tip.style.left = lt+'px';
}
if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) < parseInt(this.tip.offsetHeight+tp) ) {
this.tip.style.top = parseInt(tp-(this.tip.offsetHeight+10))+'px';
} else {
this.tip.style.top = tp+'px';
}
this.tip.style.visibility = 'visible';
this.tip.style.opacity = '.1';
this.tipFade(10);
},
tipFade: function(opac) {
var passed = parseInt(opac);
var newOpac = parseInt(passed+10);
if ( newOpac < 70 ) {
this.tip.style.opacity = '.'+newOpac;
this.tip.style.filter = "alpha(opacity:"+newOpac+")";
opacityID = window.setTimeout("sweetTitles.tipFade('"+newOpac+"')",20);
}
else {
this.tip.style.opacity = '.70';
this.tip.style.filter = "alpha(opacity:70)";
}
}
};
function pageLoader() {
sweetTitles.init();
}
addEvent(window,'load',pageLoader);

You probably need to work in

function Locate(e){
var posx=0,posy=0;
if(e==null) e=window.event;
if(e.pageX || e.pageY){
posx=e.pageX; posy=e.pageY;
}
else if(e.clientX || e.clientY){
if(document.documentElement.scrollTop){
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else{
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
document.getElementById("btc").style.top=(posy+10)+"px";
document.getElementById("btc").style.left=(posx-20)+"px";
}


from the bubble tip code

Dan

@ whizard,
Thanks for the heads up, I tried playing around with it but couldn't get it to work.
I spent a day and a half trying to get the results I'm looking before asking for help.
I also borrowed some script from bubble tooltips and tried to implement it in sweet title (with changing some things around of course) but it didn't work. Any ideas :confused:

I guess what would be good is an exact explanation of what features you are looking for. (IE, what features do you like about the SweetTitles that make you use them instead of bubble titles)

Dan

All I'm looking to do is to have the tooltip follow the cursor around in sweet title like it does in bubble titles.

Sweet titles lets you write multiple lines of text as opposed to bubble titles. I can actually give an explanation or an elaborate description of anything I like.

But this has absolutely no relevance as to why I would like to have the tooltip follow the cursor around. Pls explain.

But this has absolutely no relevance as to why I would like to have the tooltip follow the cursor around. Pls explain.


No, it does. If we don't know what you want, how can we solve the problem for you?

Giving us more info allowed ancora to find you a script that had all the features you wanted. (I think, based on your descriptions)

Dan

Hopefully, that will turn out to be true. But, I didn't "find" the code, I wrote it.


Oh. :o

I didn't know people could do that! :eek:

:D

Dan

No, it does. If we don't know what you want, how can we solve the problem for you?

Giving us more info allowed ancora to find you a script that had all the features you wanted. (I think, based on your descriptions)

Dan

Yeah I believe I clearly described what I tried to do and what I'm asking help with.
I'm not looking for a script. What I'm asking help with is what values do I change in the already given script above to allow the cursor to follow the tooltip around.

Ideas anyone?