相关疑难解决方法(0)

该网站包含带有动态内容的工具提示的链接.我正在使用jquery UI Tooltip来显示它们.我不希望每次用户意外地将光标悬停在显示工具提示的链接上.我只想在显示工具提示时将光标延迟链接几秒钟.它应该像在Gmail中一样工作,当您将鼠标悬停在发件人名称上时,您会看到有关他的信息(参见图片).

我需要工具提示,用户可以与之交互,所以我使用此代码(感谢Antonimo /sf/answers/1051033161/)

$( document ).tooltip({
  show: null, // show immediately 
  items: 'input',
  hide: {
    effect: "", // fadeOut
  },
  open: function( event, ui ) {
    ui.tooltip.animate({ top: ui.tooltip.position().top + 10 }, "fast" );
  },
  close: function( event, ui ) {
    ui.tooltip.hover(
        function () {
            $(this).stop(true).fadeTo(400, 1); 
            //.fadeIn("slow"); // doesn't work because of stop()
        },
        function () {
            $(this).fadeOut("400", function(){ $(this).remove(); })
        }
    );
  }
});

这里的示例(当鼠标悬停在带有工具提示的元素上时,您可以看到所有这些混乱)

怎么做得更好？使用timeOut？或者也许我应该使用hoverIntent插件？但它将如何编码？

我使用jQuery UI Tooltip Widget并且有代码:

  $(function() {$( document ).tooltip({  
    content: 'connecting',
    content:function(callback) {
            $.get('teacher.php?teacherid=' + link,{}, function(data) {
            callback(data);
        });
    },

  })});

在我的页面上我有:

<div title="" onmouseover="{link=1}">Alex Brown</div>
<div title="" onmouseover="{link=2}">John Black</div>

但它不起作用.如何向JS发送变量,Alex Brown是ID = 1的老师,John Black是ID = 2的老师？

UPD:嗯,它是固定的

  <script>
  $(function() {$( document ).tooltip({ 
    show: 0,
    hide: 0,
    items: 'teacher',
    content: 'connecting',
    content: function(callback) {
            var x=$(this).attr('id') 
            $.get('teacher.php?teacherid='+x,{}, function(data) {
            callback(data);
        });
    },

  })});
  </script> 

在HTML中我现在有:

<teacher id="1">Alex Brown</teacher>
<teacher id="2">John Black</teacher>
<teacher id="3">Homer Simpson</teacher>