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){
var defaults = {
speed: 200,
delay: 300
};
var options = $.extend(defaults, options);
getTip = function() {
var tTip =
"<div class='tip'>" +
"<div class='tipMid'>" +
"</div>" +
"<div class='tipBtm'></div>" +
"</div>";
return tTip;
}
$("body").prepend(getTip());
$(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();
$this.hover(
function() {
tipInner.html(tTitle);
setTip(tTop, tLeft);
setTimer();
},
function() {
stopTimer();
tip.hide();
}
);
setTimer = function() {
$this.showTipTimer = setInterval("showTip()", defaults.delay);
}
stopTimer = function() {
clearInterval($this.showTipTimer);
}
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});
}
showTip = function(){
stopTimer();
tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
}
});
};
</script>
My CSS
.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.