Question

我第一次使用工具提示并对其进行了大量研究。我使用jquery网站获取大部分信息。当鼠标点击超链接时，我打算使用工具提示显示动态数据。我将标题添加到我的链接中，并在下面输入以下代码：

  var t = 1000;
     $(document).tooltip({
       content: '... waiting on ajax ...',
open: function(evt, ui) {
    var elem = $(this);
    $.ajax({ type: "POST",url:'/GetTooltip/', data: 80140}).always(function() {

        elem.tooltip('option', 'content', 'Ajax call complete');

     });
setTimeout(function(){
  $(ui.tooltip).hide('destroy');
   }, t);},

   position: {
    my: "center bottom-20",
    at: "center top",
    using: function( position, feedback ) {
      $( this ).css( position );
      $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
    }
  }

});

我不完全了解ajax调用的语法，该函数引用了always函数以及如何在我的工具提示中显示数据。 GetTooltip返回JSON数据，我只想发布到GetTooltip脚本和返回的数据以显示在我的工具提示上。目前我的ajax没有发布任何内容。

Answer 1

关于你不完全了解

的陈述

总是函数：always（函数（data | jqXHR，textStatus，jqXHR | errorThrown）{}）;总是在执行ajax请求后执行。有关详细信息，请参阅文档deferred.always()。请同时查看jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { })
获取返回的数据以显示在工具提示上 - 请参阅小提琴中的示例

你可以在stackoverflow上找到很多other answers。看看这个fiddle，如果您需要更多帮助，请告诉我。

更新了小提琴2

如果有updated the fiddle。您可以传递从ajax回调返回的参数中的值。这是围绕ajax调用的简单包装：

function callAjax(elem){
    $.ajax({ url: '/echo/json/',
         type: 'POST',
         contentType:"application/json; charset=utf-8",
         dataType:"json",
         data:  { json: JSON.stringify({ text: 'some text'})}
      }).always(
          function(data,textStatus, errorThrown) 
          { 
             elem.tooltip('option', 'content'
                , 'Ajax call complete. Result:' + data.text);
           });
}

我正在使用上面的JSON.stringify(...)创建一个Json-String。此功能可能并非在所有浏览器中都存在。因此，如果您遇到麻烦，请使用当前的chrome / chromium浏览器进行测试。

所以你可以使用tooltip（）中的包装函数：

$('#tippy').tooltip({
    content: '... waiting on ajax ...',
    open: function(evt, ui) {
        var elem = $(this);
        callAjax(elem);
    } // open
});

上面你可以看到always方法调用一个带有3个参数的匿名函数（data，textStatus，errorThrown）。要传递来自ajax调用的回复，您可以使用data。上面我只传递一个带有属性文本的简单对象。要访问它，您可以使用data.text

使用jquery ui的工具提示

1 个答案:

更新了小提琴2