В jQuery UI 1.9 появился новый виджет Tooltip, API docs подсказывает, что в нем может отображаться контент AJAX, но без дальнейших Детали. Я предполагаю, что могу выполнить что-то подобное с синхронным и блокирующим запросом, но это не то, что я хочу.
Как мне отобразить любой контент, который был получен с помощью асинхронного запроса AJAX?
Вот пример ajax jqueryui tootip widget из моего блога. Надеюсь, это поможет.
$(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**
});
},
});
Это не полное решение, но оно показывает основную технику получения данных динамически во время события 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
Одна вещь, которую следует искать при использовании опции "content" всплывающей подсказки для "AJAX" текста в всплывающей подсказке, заключается в том, что текстовое извлечение вводит задержку в инициализацию всплывающей подсказки.
В случае, если мышь быстро перемещается по всплывающей подсказке dom node, событие выключения мыши может произойти до завершения инициализации, и в этом случае всплывающая подсказка еще не прослушивает событие.
В результате отображается всплывающая подсказка и не закрывается до тех пор, пока мышь не будет перемещена назад по node и снова.
Несмотря на то, что это может привести к некоторым сетевым издержкам, которые могут не потребоваться, подумайте о получении текста всплывающей подсказки перед настройкой всплывающей подсказки.
В моем приложении я использую свои собственные расширения jquery, чтобы сделать вызов AJAX, проанализировать повторы и инициализировать ВСЕ всплывающие подсказки, очевидно, вы можете использовать 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 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 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;
Вот пример, который использует вызов jsfiddle "/echo/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: