Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Tooltip follow cursor

    I’ve been working on modifying a few pop-up tooltips to fit my needs. I started working with BubbleTooltips but that was pretty limited for what I wanted to use it for.
    I came across Sweet Titles 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.
    Code:
    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);

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    You probably need to work in
    Code:
    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
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    @ 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

  • #4
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    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
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Quote Originally Posted by dantra
    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
    Last edited by whizard; 12-17-2006 at 01:16 PM. Reason: typo fix
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #7
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Hopefully, that will turn out to be true. But, I didn't "find" the code, I wrote it.
    Oh.

    I didn't know people could do that!



    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by whizard View Post
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •