`
ljz0898
  • 浏览: 228648 次
  • 性别: Icon_minigender_1
  • 来自: 海南海口
社区版块
存档分类
最新评论

query qtip demo

 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script> 


  <script type="text/javascript">   
  $(document).ready(function()   
  {   



   $('input[name="month"]').qtip({
   content: 'Presets, presets and more presets. Let\'s spice it up a little with our own style!',
   style: { 
      width: 200,
      padding: 5,
      background: '#A2D959',
      color: 'black',
      textAlign: 'center',
      border: {
         width: 7,
         radius: 0,
         color: '#A2D959'
      },
      tip: 'topMiddle',
      name: 'blue' // Inherit the rest of the attributes from the preset dark style
   },
    position: {
      corner: {
         target: 'bottomMiddle',
         tooltip: 'topMiddle'
      }
   },
   show: 'focus',   
   hide: 'unfocus'

});
  });   
</script>  



 </head>

 <body>
  <div id="content">  
  <a href=" " rel="modal">Basic text</a>  
  <input id="month" type="text" name="month">
</div>  

<div id="content">
  <a href=" ">Basic text</a>
</div> 


 </body>
</html>



其中qtip是表示箭头指向
分享到:
评论

相关推荐

    Jquery QTip.zip

    **jQuery QTip插件详解** **一、QTip简介** jQuery QTip是一款强大的前端提示插件,它基于jQuery库,提供了丰富的自定义选项和样式控制,可以创建各种类型的提示信息,如信息气泡、提示框、工具提示等。QTip不仅...

    qTip2_中文_API

    qTip2是一款强大的jQuery插件,用于创建可自定义的工具提示。这款插件提供了丰富的功能,包括事件处理、定位、全局设置、核心功能、隐藏与显示、内容填充以及样式定制。以下是对qTip2中文API的详细解读: 1. **qTip...

    qTip2中文API

    **qTip2中文API**是针对qTip2这款JavaScript库的详细中文文档,旨在帮助开发者更好地理解和使用这个强大的工具。qTip2是一个功能丰富的jQuery插件,主要用于创建可自定义的提示框和弹出窗口,它提供了丰富的API,...

    qTip提示框+API

    qTip2是一个强大的jQuery插件,专用于创建功能丰富的提示信息和弹出窗口。这个插件以其灵活性、可定制性和美观的设计而闻名,是qTip系列的第二代产品,相较于第一版进行了全面的升级和改进。qTip2的出现使得在网页...

    自动化表单验证+qTip提示实例.zip

    在本文中,我们将深入探讨如何使用jQuery实现自动化表单验证,并结合qTip工具提示来创建一个用户友好的交互体验。这个实例是基于一个留言模板,旨在提供一种验证方法,它既简洁又具有广泛的适用性。 首先,让我们...

    前端项目-qtip2.zip

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

    jquery qtip

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

    jquery-qtip

    **jQuery qTip** 是一个非常流行的JavaScript库,用于创建可自定义的提示框和弹出窗口。这个库基于广泛使用的JavaScript库jQuery构建,为用户提供了一种简单而强大的方式来添加提示信息、工具提示或者复杂的弹出内容...

    qtip2(js&css;)

    **QTip2** 是一个基于 **JavaScript** 的 jQuery 插件,专用于创建高质量的工具提示(tooltip)效果。这个插件遵循 **MIT** 授权协议,意味着它可以在商业项目中自由使用,同时也允许修改和分发源代码。QTip2 设计为...

    qTip2 精致的jQuery提示信息插件

    qTip2是一款强大的jQuery插件,专用于创建优雅、可定制的提示信息。这款插件在Web开发中广泛使用,因为它提供了丰富的功能和高度的灵活性,使得开发者能够轻松地为网页元素添加各种提示效果,包括普通的提示、工具...

    qtip演示4种不同的文字提示

    QTip是一款流行的JavaScript库,它为网页应用提供了强大的提示功能。本主题将详细探讨QTip如何实现四种不同的文字提示效果,以及它们在实际应用中的价值。 首先,我们来了解QTip的基本概念。QTip是一个开源的jQuery...

    仿新浪微博jquery qtip ajax提示框

    【标题】"仿新浪微博jquery qtip ajax提示框"所涉及的知识点主要集中在前端开发领域,具体包括以下几个方面: 1. **jQuery**:jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和...

    基于JQUERY 很灵活的TIP 工具 qTip2

    而`qTip2`则是基于jQuery的一个强大且灵活的提示(tooltip)插件,它允许开发者自定义提示框的样式、位置和触发事件,从而提供更丰富的用户体验。 `qTip2`的核心特性在于它的灵活性和可定制性。通过这个工具,你...

    推荐一个Jquery浮动提示窗口的插件---qTip

    **jQuery qTip插件详解** 在网页开发中,我们经常需要为用户提供一些额外的信息提示,例如鼠标悬停在某个元素上时显示详细说明或者错误提示。jQuery qTip是一款功能强大的浮动提示窗口插件,它提供了丰富的自定义...

    jquery.qtip-1.0.0-rc3.js

    jquery.qtip-1.0.0-rc3.js 弹出层

    jquery.qtip-1.0.0-rc3.custom.zip

    《jQuery qTip插件详解与应用》 在Web开发中,提供友好的用户交互体验是至关重要的,而提示框(tooltip)就是其中一种常见的增强用户体验的工具。jQuery qTip插件是一个强大的、可定制的提示插件,它允许开发者轻松...

    qTip2:qTip2-非常强大的工具提示

    qTip2不再维护。 如果需要支持或新功能,请考虑移至较新的库! 非常强大的工具提示 介绍... qTip 2 。 第二代高级qTip插件,用于流行的jQuery框架。 qTip 2建立在1.0的用户友好但功能丰富的基础之上,为您提供了...

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

    $("#demo1").qtip({ content: "这是提示内容(By Hu Sir)" }); ``` 这将为ID为`demo1`的元素添加一个简单的提示,内容为“这是提示内容”。 2. **带标题的提示**: ```javascript $("#demo2").qtip({ ...

    Python库 | qtip-5.0.0.dev96.tar.gz

    在本文中,我们将深入探讨一个名为"qtip"的Python库,特别是其版本5.0.0.dev96。这个库的源代码以`.tar.gz`格式提供,这是一种常见的用于打包和压缩文件的格式,它结合了Unix的tar归档工具和gzip压缩算法。 首先,...

Global site tag (gtag.js) - Google Analytics