jjzjj

javascript - jQuery 工具提示 UI - x 秒后触发工具提示

coder 2024-12-10 原文

这是我目前所拥有的:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Tooltip Testings</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css"> 
      body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
    </style>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function() {
      $(document).tooltip({
        items: '.tooltip',
        show: 100,
        hide: 500,
        position: { my: 'center bottom', at: 'center top' },
        content: function( callback ) {
          var msgid = this.id.split('_')[1];
          $.ajax({
            type: 'post',
            url: '/tooltip.php',
            data:'i='+msgid,
            success: function( data ) { callback( data ); }
          });
        }
      });
    });
    </script>
  </head>
  <body>

    <p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
    <p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
    <p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
    <p><a class="tooltip" id="i_860" href="articles/programming-in-java.html">Java Article</a></p>

  </body>
</html>

上面的工作正常，但是，我想仅在鼠标悬停链接特定时间(例如 2 秒)后才触发工具提示。

此外，如果用户在指定的延迟时间到期之前将鼠标移出链接，我想取消它的触发。

有人可以帮我解决这个问题吗？

非常感谢。

最佳答案

我终于设法实现了我所寻找的。

最终结果如下:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Tooltip Testings</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css"> 
      body { margin: 60px auto; } p { padding:0; margin: 4px auto; text-align: center; }
    </style>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function() {
      $(document).tooltip({
        items: '.tooltip',
        show: 100,
        hide: 500,
        position: { my: 'center bottom', at: 'center top' },
        content: function( callback ) {
          var ARTid = this.id.split('_')[1];
          var TTtmr = setTimeout( function() {
            $.ajax({
              type: 'post',
              url: '/tooltip.php',
              data: 'i='+ARTid,
              success: function( data ) { callback( data ); }
            }); 
          }, 800 );
          $('.tooltip').mouseleave( function() { clearTimeout( TTtmr ); } );
        }
      });
    });
    </script>
  </head>
  <body>

    <p><a class="tooltip" id="i_283" href="articles/programming-in-php.html">PHP Article</a></p>
    <p><a class="tooltip" id="i_567" href="articles/programming-in-c.html">C+ Article</a></p>
    <p><a class="tooltip" id="i_741" href="articles/programming-in-aspx.html">ASPX Article</a></p>
    <p><a class="tooltip" id="i_283" href="articles/programming-in-java.html">Java Article</a></p>

  </body>
</html>

关于javascript - jQuery 工具提示 UI - x 秒后触发工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16499249/

javascriptjQuery34ltgttooltip

有关javascript - jQuery 工具提示 UI - x 秒后触发工具提示的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  3. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  4. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  5. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  6. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  7. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  8. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  9. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  10. Ruby 在 n *milli* 秒后超时一段代码 - 2

    在Ruby中，我需要在n毫秒秒后暂停一段代码的执行。我知道RubyTimeout库支持秒的超时:http://ruby-doc.org/stdlib/libdoc/timeout/rdoc/index.html这可能吗？ 最佳答案 只需为超时使用十进制值。n毫秒的示例:Timeout::timeout(n/1000.0){sleep(100)} 关于Ruby在n*milli*秒后超时一段代码，我们在StackOverflow上找到一个类似的问题： https:

随机推荐