Click here to Skip to main content
15,868,141 members
Please Sign up or sign in to vote.
4.00/5 (1 vote)
See more:
Hey guys I have a small problem, I created a tooltip (with a little help from the internet) and I can't get it displaying in my project. I created a stand alone project and it displayed perfectly so I can't understand why it wont display when I move it to my main project.

<pre lang="Javascript">
<script type="text/javascript">
      $(document).ready(function() {
          $('.tTip').betterTooltip({ speed: 150, delay: 300 });
      });
$.fn.betterTooltip = function(options){
	
	/* Setup the options for the tooltip that can be 
	   accessed from outside the plugin              */
	var defaults = {
		speed: 200,
		delay: 300
	};
	
	var options = $.extend(defaults, options);
	
	/* Create a function that builds the tooltip 
	   markup. Then, prepend the tooltip to the body */
	getTip = function() {
		var tTip = 
			"<div class='tip'>" +
				"<div class='tipMid'>"	+
				"</div>" +
				"<div class='tipBtm'></div>" +
			"</div>";
		return tTip;
	}
	$("body").prepend(getTip());
	
	/* Give each item with the class associated with 
	   the plugin the ability to call the tooltip    */
	$(this).each(function(){

	var $this = $(this);
		var tip = $('.tip');
		var tipInner = $('.tip .tipMid');
		
		var tTitle = (this.title);
		this.title = "";
		
		var offset = $(this).offset();
		var tLeft = offset.left;
		var tTop = offset.top;
		var tWidth = $this.width();
		var tHeight = $this.height();
		
		/* Mouse over and out functions*/
		$this.hover(
			function() {
				tipInner.html(tTitle);
				setTip(tTop, tLeft);
				setTimer();
			}, 
			function() {
				stopTimer();
				tip.hide();
			}
		);		   
		
		/* Delay the fade-in animation of the tooltip */
		setTimer = function() {
			$this.showTipTimer = setInterval("showTip()", defaults.delay);
		}
		
		stopTimer = function() {
			clearInterval($this.showTipTimer);
		}
		
		/* Position the tooltip relative to the class 
		   associated with the tooltip                */
		setTip = function(top, left){
			var topOffset = tip.height();
			var xTip = (left-30)+"px";
			var yTip = (top-topOffset-60)+"px";
			tip.css({'top' : yTip, 'left' : xTip});
		}
		
		/* This function stops the timer and creates the
		   fade-in animation                          */
		showTip = function(){
			stopTimer();
			tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
		}
	});
};

	</script>

My CSS
CSS
/*-----------------------------------------------------------------------------------------------*/
/*                                         TOOLTIP STYLES                                        */
/*-----------------------------------------------------------------------------------------------*/
	.tTip {width: 200px; position: absolute; cursor: pointer; color:#666; font-weight: bold;}
	.tip {color: #333;}
	
.tip {
	width: 212px;
	padding-top: 37px;
	overflow: hidden;
	
	position: absolute;
	z-index: 500;
	background: transparent url(Images\tipTop.png) no-repeat top;}
	
.tipMid {background: transparent url(Images\tipMid.png) repeat-y; padding: 0 25px 20px 25px;}
.tipBtm {background: transparent url(Images\tipBtm.png) no-repeat bottom; height: 32px;}

So basically this is called everytime the tTip css class is refrenced.
Note it is working perfectly on its own. I originally thought it might be the url of the images but no matter what I did here it had no effect.
Thanks in advance guys.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900