工具提示未显示 [英] Tooltip not being displayed

问题描述

伙计们，我有一个小问题，我创建了一个工具提示(在互联网的帮助下)，但无法在项目中显示它.我创建了一个独立项目，它完美显示，所以我不明白为什么将其移到主项目时不会显示.

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>

我的CSS

My 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;}

因此，基本上，每次刷新tTip css类时都会调用此方法.
请注意，它本身可以完美运行.我原本以为这可能是图片的网址，但是无论我在这里做什么，都没有效果.
在此先感谢大家.

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.

推荐答案

(document).ready(function(){

(document).ready(function() {

(''.tTip'' ).betterTooltip({速度:150，延迟:300}); });

(''.tTip'').betterTooltip({ speed: 150, delay: 300 }); });

.fn.betterTooltip = function(options){ /*设置工具提示的选项 从插件外部访问*/ var默认值= { 速度:200， 延误:300 }; var options =

.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 =

这篇关于工具提示未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！