问题描述
我找不到此插件的解决方案,因为我找不到任何有效的演示或文档通过Ajax获取外部内容.
I can't find a solution for this plugin since I cannot find any working demo or documentation for external content via Ajax.
基本上,我有一个带有鼠标悬停JS功能的简单div
:
Basically I have a simple div
with a mouse hover JS function:
<div onmouseover="myFunct(this,'.$comment['id'].');" >Hover Me</div>
这是我的JS函数:
function myFunct(element, id){
$(element).tooltipster({
contentCloning: true,
interactive:true,
maxWidth:250,
contentAsHTML:true,
content: 'Loading...',
// 'instance' is basically the tooltip. More details in the "Object-oriented Tooltipster" section.
functionBefore: function(instance, helper) {
var $origin = $(helper.origin);
// we set a variable so the data is only loaded once via Ajax, not every time the tooltip opens
if ($origin.data('loaded') !== true) {
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+id+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
// to remember that the data has been loaded
$origin.html('loaded', true);
}
});
}
}
});
}
为什么工具提示仅在第二次鼠标悬停时显示?
这里是类似的例子. JSFiddle
Here is a similar Eg. JSFiddle
更新
感谢支持,这解决了我的问题:
Thanks to the support this has solved my issue:
<div class="tooltip" data-id="'.$comment['id'].'">Hover me!</div>
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
content: 'Loading...',
functionBefore: function(instance, helper){
var $origin = $(helper.origin);
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
}
});
},
interactive:true,
contentAsHTML:true,
maxWidth:250
});
});
</script>
无论如何,这在Ajax动态内容上不起作用,我也不知道为什么(我试图在Ajax页面上插入它,没办法)
Anyway this doesn't work on Ajax dynamic content, and I don't know why (I tried to insert it on Ajax page, no way)
推荐答案
我建议您做一些事情:首先,将JS与HTML分开(这被认为是最佳做法),其次,在页面加载时初始化Tooltipster,以及最后,删除包装器功能.初始化工具提示后,默认情况下,您的代码将在悬停时触发.
I'd recommend a few things: first, separate your JS from your HTML (this is considered best practice), second, initialize Tooltipster on page load, and last, remove the wrapper function. Once the tooltip is initialized your code will trigger by default on hover.
从HTML分离JS
<div class="hover-me tool-tip" data-commentId="12345">Hover Me</div>
在文档就绪时初始化工具提示
$(document).ready(function() {
$('.tooltip').tooltipster();
});
带有悬停的触发工具提示
$('.hover-me').tooltipster({
// all of your code from above
functionBefore: function(){
var commentId = $(this).attr('data-commentId');
}
});
注意:
Tooltipster的默认触发器是hover
(如文档中所示),但是,您可以通过传入trigger: hover
来显式设置它,这将使您的代码更具可读性且因此易于维护.
The default trigger for Tooltipster is hover
(as seen in the documentation), however, you could explicitly set it by passing in trigger: hover
, which would make your code slightly more readable and as such maintainable.
工具提示支持建议(如)
Tooltipster Support Recommendation (as seen in the comments)
之所以添加它,是因为它加强了我在上面的解决方案,并为将来的开发人员添加了上下文……这可能会在注释部分被忽略.
I add this because it reinforces my solution above and adds context for future devs...that, and it might be overlooked in the comments section.
这篇关于为什么仅将鼠标悬停2次后才显示此jQuery插件(工具提示)的Ajax内容?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!