导入jquery及qtip的js
<link rel="stylesheet" type="text/css" href="js/jquery.qtip.min.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qtip.min.js"></script>
html代码
<div id="myDiv">
<a>qtip</a>
</div>
js代码
$(function (){
$("#myDiv a").each(function(){
$(this).qtip({
content: {
text: "qtip is so good"
},
overwrite: true,
style: {
classes: 'ui-tooltip-navyBlue ui-tooltip-shadow ui-tooltip-rounded'
},
position: {
//target: 'mouse',
at: 'bottom left',
viewport: true,
adjust: { mouse: false },
viewport: $(window)
},
hide: {
delay: 300,
//event: 'mouseleave',
fixed: true,
effect: function() {
$(this).slideUp();
}
}
});
});
});
效果展示
- 大小: 8.1 KB
分享到:
相关推荐
《jQuery qTip详解:构建高效提示插件的艺术》 在Web开发中,用户交互体验是至关重要的,而提示信息作为用户界面的一部分,起着提供帮助和反馈的关键作用。jQuery qTip是一个强大的、可定制的提示插件,它极大地...
标签"Qtip js"表明这个插件与jQuery库紧密集成,利用JavaScript语言的威力来处理DOM操作和事件处理,使得提示信息的动态交互变得简单。jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax...
首先,确保引入了jQuery库和jQuery.qTip插件的JavaScript文件。在示例代码中,可以看到引用了`jquery-1.6.4.min.js`和`jquery.qtip-1.0.0-rc3.min.js`。 接下来,通过jQuery的选择器选取需要添加提示信息的元素,并...
jQuery提示插件qTip2是一款强大的工具,它扩展了jQuery的功能,允许开发者创建美观且功能丰富的提示信息。这款插件支持Ajax加载内容以及多种样式设置,使得提示信息不仅能够显示静态文本,还能动态获取远程数据,...
jQuery插件使得创建自定义Tooltip变得简单易行。例如,“jQuery Tooltipster”是一款功能强大的插件,支持多种样式和动画效果,可以自定义内容、位置、触发方式等。另一款插件“qTip2”则提供了高度的灵活性和可配置...
【标题】"前端项目-qtip2.zip"是一个包含前端开发中的qTip2插件的压缩文件,这个插件是第二代高级提示工具,专为jQuery框架设计。在本篇文章中,我们将深入探讨qTip2的功能、用法以及如何在实际项目中应用。 【描述...
提供为 Rails 3.1+ 资产管道打包的qTip2 jQuery 插件。 安装 将这些行添加到应用程序的Gemfile : # qtip2 jquery plugin packaged for the rails asset pipeline gem 'qtip2-jquery-rails' , '~> 2.2.100' 然后...
总结来说,"jquery气泡弹出框"是指使用jQuery和Qtip插件实现的交互式提示功能,它可以极大地提升用户体验,提供信息反馈、错误提示等多种功能。通过灵活的配置和丰富的样式,Qtip可以适应各种应用场景,是Web开发中...
总的来说,这个小例子展示了`jQuery Validate`插件的基本用法,包括定义验证规则、指定错误消息的位置以及处理不同类型的验证需求。通过这个例子,我们可以学习如何利用这个插件提高表单验证的效率和用户体验。