jQuery UI中的AJAX內容Tooltip Widget

jQuery UI 1.9中有一個新的Tooltip Widget，它的API docs暗示AJAX內容可以顯示在其中，但沒有任何進一步的細節。我想我可以通過同步和阻止請求完成類似的事情，但這不是我想要的。jQuery UI中的AJAX內容Tooltip Widget

如何顯示使用異步AJAX請求檢索到的任何內容？

來源

2012-11-01 sanmai

下面是一個例子阿賈克斯jqueryui tootip小部件從my blog .hope它有幫助。

$(document).tooltip({ 
    items:'.tooltip', 
    tooltipClass:'preview-tip', 
    position: { my: "left+15 top", at: "right center" }, 
    content:function(callback) { 
     $.get('preview.php', { 
      id:id 
     }, function(data) { 
      callback(data); //**call the callback function to return the value** 
     }); 
    }, 
});

來源

2012-12-24 07:41:42

非常有幫助。謝謝！ – Derrick

這不是一個完整的解決方案很明顯，但它顯示了open事件過程中獲取數據動態的基本技術：

$('#tippy').tooltip({ 
    content: '... waiting on ajax ...', 
    open: function(evt, ui) { 
     var elem = $(this); 
     $.ajax('/echo/html').always(function() { 
      elem.tooltip('option', 'content', 'Ajax call complete'); 
     }); 
    } 
});

見Fiddle

來源

2012-11-05 03:21:29 slashingweapon

我注意到，在小提琴，如果您快速通過鼠標懸停在tooltiped文本，該工具提示可以在「關閉」模式下被吸引。我不知道這是否是工具提示中的錯誤，與ajax代碼的交互，還是jquery-ui 1.9和jsFiddle的jQuery 1之間的版本不兼容。8.x中 – slashingweapon

其實你可以用這個做一些有趣的事情，但是我必須更多地瞭解你的具體用例以提供更詳細的建議。 – slashingweapon

y，你可以用這個做很棒的事情，我使用隱藏的divs作爲工具提示，在打開的功能中，我只在特定的隱藏div爲空時纔會調用ajax。 – sanjuro

一件事把風使用提示「內容」選項「AJAX」文成工具提示，當是文本檢索引入延時到提示初始化。

如果鼠標在工具提示的dom節點上快速移動，則可能會在初始化完成之前發生鼠標懸停事件，此時工具提示尚未偵聽事件。

結果是顯示工具提示，並且不關閉，直到鼠標移回節點並再次移出。

雖然它會導致一些可能不需要的網絡開銷，但請考慮在配置工具提示之前檢索工具提示文本。

在我的應用程序，我用我自己的jQuery的擴展，使AJAX調用，解析resutls並初始化所有的提示，很明顯，你可以使用jQuery和/或您自己的擴展，但它的要點是：

使用圖像標記作爲提示錨，要檢索由名稱atrribute標識的文本：

<img class="tooltipclassname" name="tooltipIdentifier" />

使用調用擴展方法來配置所有的提示：

$(".tooltipclassname").extension("tooltip");

內部擴展的工具提示方法：

var ids = ""; 
    var nodes = this; 

    // Collect all tooltip identifiers into a comma separated string 
    this.each(function() { 
     ids = ids + $(this).attr("name") + ","; 
    }); 

    // Use extension method to call server 
    $().extension("invoke", 
    { 
     // Model and method identify a server class/method to retrieve the tip texts 
     "model": "ToolTips", 
     "method": "Get", 

     // Send tooltipIds parameter 
     "parms": [ new myParmClass("tipIds", ids) ], 

     // Function to call on success. data is a JSON object that my extension builds 
     // from the server's response 
     "successFn": function(msg, data) { 

      $(nodes).each(function(){ 

       // Configure each tooltip: 
       // - set image source 
       // - set image title (getstring is my extension method to pull a string from the JSON object, remember that the image's name attribute identifies the text) 
       // - initialise the tooltip 
       $(this).attr("src", "images/tooltip.png") 
        .prop("title", $(data).extension("getstring", $(this).attr("name"))) 
        .tooltip(); 
      }); 
     }, 
     "errorFn": function(msg, data) { 
      // Do stuff 
     } 
    }); 

    // Return the jquery object 
    return this;

來源

2013-07-24 02:58:06 Beau

這裏是使用的jsfiddle「/回聲/ HTML /」 AJAX調用一個jQuery UI的工具提示的例子。

HTML：

<body> 
<input id="tooltip" title="tooltip here" value="place mouse here"> 
</body>

的JavaScript：

// (1) Define HTML string to be echo'ed by dummy AJAX API 
var html_data = "<b>I am a tooltip</b>"; 

// (2) Attach tooltip functionality to element with id == tooltip 
// (3) Bind results of AJAX call to the tooltip 
// (4) Specify items: "*" because only the element with id == tooltip will be matched 
$("#tooltip").tooltip({ 
    content: function(response) { 
     $.ajax({ 
     url: "/echo/html/", 
     data: { 
       'html': html_data 
      }, 
     type: "POST" 
     }) 
      .then(function(data) { 
      response(data); 
      }); 
    }, 
    items: "*" 
});

這裏是jsfiddle這個例子：

來源

2016-07-06 18:22:37

jQuery UI中的AJAX內容Tooltip Widget

回答

相關問題