添加提示内容动态

我知道jQuery的工具提示部件的前提是绑定了它具有提示功能之前存在一个提示一个HTML元素可以使用，因此该段将工作：添加提示内容动态

$('#test').append('<span id="testspan" title="My test span">Hello world</span>"); 
$('#testspan').tooltip();

但是，我通过遍历一些json创建了一个完整的HTML部分，然后将整个部分附加到我的页面。我创建的每条记录都有一些跨度，我也想使用content参数来添加一些自定义内容。使用下面的伪代码，因为当我打电话.tooltip()不存在的元素将无法工作：

// parse JSON 
/* 
    ... 
*/ 

// add results to page 
var html; 
for (var i=0; i<json_output.length; i++) { 
    html+='<span id="' + i + '">' + json_output[i][0].val + '</span>'; 
    $('#' + i).tooltip({content: "Some complicated stuff from " + json_output[i][1].val + " that can't be in a title attribute"}); 
} 

$('#mycontent').append(html);

我可以打电话给我的循环中append - 但我想有性能问题对于这一点，我也可以存储数据放在一个单独的数组中，并循环遍历所有数据，并在调用.append()之后创建所有工具提示 - 但这并不是很干净。有没有使用回调函数（或类似的）设置content参数的方法？

来源

2016-10-01 ChrisW

为什么不用所有工具提示使用相同的类名称，然后调用$（“。classname”）。tooltip（）; –

Sory，我应该更清楚的是，工具提示内容也是独一无二的 - 已更新问题以反映这 – ChrisW

我认为你必须使用$（“＃”+ i）.tooltip（... –

我认为这个解决方案会为你的工作的情况下，使用jQuery元数据存储：

var $mycontent = $('#mycontent'); 
for(var i = 0; i < json_output.length; i++){ 
    var $item = $('<span class="mytooltip" id="' + i + '" title="">' + json_output[i][0].val + '</span>'); 
    $item.data('content', json_output[i][1].val); 
    $mycontent.append($item); 
} 

$('.mytooltip').tooltip({ 
    content: function(){ 
     return $(this).data('content'); 
    } 
});

注：我不知道，但我认为.tooltip()元素都必须有title属性（甚至是空的）。

来源

2016-10-01 13:41:50 kosmos

这仍然依赖循环内的'.append（）'调用，这是我有点担心的。 – ChrisW

我以为你只是想要一种有效的方式来向工具提示添加内容。认为在某个时候你必须追加这些项目。请参阅* [this jsfiddle]（https://jsfiddle.net/5moh1699/）*;这是另一种同时追加所有内容的方法。但是如果你认为你的导航器会暂停一段时间（我们谈论太多的数据，大量的数据），也许你需要使用工作者或某种方法来异步添加数据。 – kosmos

添加提示内容动态

回答

相关问题