jquery ui tooltip例子

jquery ui tooltip有很多的方法，我用了的这种感觉简单点，先写下来准备后面再用！

http://craigsworks.com/projects/qtip/docs/tutorials

这是这个ui的下载说明地址，是开源的框架啊！

首先要导入两个js文件，一个是jquery的js这就不用多说了，另外一个是

<script src="/public/javascripts/tips/jquery.qtip-1.0.0-rc3.js"
type="text/javascript" charset="${_response_encoding}"></script>

我现在使用play framework开发！

先要定义样式！

<!-- tips style -->
<div class="qtip qtip-stylename">
<div class="qtip-tip" rel="cornerValue"></div>
<div class="qtip-wrapper">
<div class="qtip-borderTop"></div>
<div class="qtip-contentWrapper">
<div class="qtip-title">
<div class="qtip-button"></div>
</div>
<div class="qtip-content"></div>
</div>
<div class="qtip-borderBottom"></div>
</div>
</div>

　　然后实例化这个tip

//显示tip
	$('#searchBtn')
	.qtip({
		content: {
			text: "亲~请先填写宝贝的核心关键词哦···"
		},
		position: {
			at: "center left " 
		},
		show: {
			event: false, 
			ready: false 
		},
		hide: false, 
		style: {
			name:'cream' 
		}
	});

　　最后调用

			$('#searchBtn').qtip('show');
		
			$('#searchBtn').qtip('hide');
			$('#searchBtn').qtip('disable',true);

　　具体在实例化的时候有很多的参数要写！只能看官方网站了！

转载于:https://www.cnblogs.com/sallon/archive/2012/11/09/2762463.html