`
小猪装坚强
  • 浏览: 6526 次
社区版块
存档分类
最新评论

jquery qtip提示插件 简单用法

 
阅读更多
导入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

    《jQuery qTip详解:构建高效提示插件的艺术》 在Web开发中,用户交互体验是至关重要的,而提示信息作为用户界面的一部分,起着提供帮助和反馈的关键作用。jQuery qTip是一个强大的、可定制的提示插件,它极大地...

    qTip2 精致的jQuery提示信息插件

    标签"Qtip js"表明这个插件与jQuery库紧密集成,利用JavaScript语言的威力来处理DOM操作和事件处理,使得提示信息的动态交互变得简单。jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax...

    jquery.qtip提示信息插件用法简单实例

    首先,确保引入了jQuery库和jQuery.qTip插件的JavaScript文件。在示例代码中,可以看到引用了`jquery-1.6.4.min.js`和`jquery.qtip-1.0.0-rc3.min.js`。 接下来,通过jQuery的选择器选取需要添加提示信息的元素,并...

    jQuery提示插件qTip2用法分析(支持ajax及多种样式)

    jQuery提示插件qTip2是一款强大的工具,它扩展了jQuery的功能,允许开发者创建美观且功能丰富的提示信息。这款插件支持Ajax加载内容以及多种样式设置,使得提示信息不仅能够显示静态文本,还能动态获取远程数据,...

    50个jQuery插件实用图例

    jQuery插件使得创建自定义Tooltip变得简单易行。例如,“jQuery Tooltipster”是一款功能强大的插件,支持多种样式和动画效果,可以自定义内容、位置、触发方式等。另一款插件“qTip2”则提供了高度的灵活性和可配置...

    前端项目-qtip2.zip

    【标题】"前端项目-qtip2.zip"是一个包含前端开发中的qTip2插件的压缩文件,这个插件是第二代高级提示工具,专为jQuery框架设计。在本篇文章中,我们将深入探讨qTip2的功能、用法以及如何在实际项目中应用。 【描述...

    gem-qtip2-jquery-rails:提供为 Rails 3.1+ 资产管道打包的 `qTip2` jQuery 插件

    提供为 Rails 3.1+ 资产管道打包的qTip2 jQuery 插件。 安装 将这些行添加到应用程序的Gemfile : # qtip2 jquery plugin packaged for the rails asset pipeline gem 'qtip2-jquery-rails' , '~&gt; 2.2.100' 然后...

    jquery气泡弹出框

    总结来说,"jquery气泡弹出框"是指使用jQuery和Qtip插件实现的交互式提示功能,它可以极大地提升用户体验,提供信息反馈、错误提示等多种功能。通过灵活的配置和丰富的样式,Qtip可以适应各种应用场景,是Web开发中...

    jquery插件validate验证的小例子

    总的来说,这个小例子展示了`jQuery Validate`插件的基本用法,包括定义验证规则、指定错误消息的位置以及处理不同类型的验证需求。通过这个例子,我们可以学习如何利用这个插件提高表单验证的效率和用户体验。

Global site tag (gtag.js) - Google Analytics