我的问题似乎很长,但我想详细提供相关信息,所以请耐心等待。
我在我的网站上使用tooltipster工具提示插件(http://iamceege.github.io/tooltipster/)。但是我的问题更多地与JS而不是tooltipster插件有关。我可以轻松地将tooltip插件集成到我的网站上,并且在内容静态的图像,按钮等上都可以正常工作。但是,我是根据JSON响应动态填充表的,无法在表单元格上使用工具提示。
首先,我认为该插件可能存在一些问题。在一瞬间,我切换到了自举内置工具提示,并且遇到了同样的问题。我可以得到引导工具提示,以处理除表格单元格以外的其他其他元素。
这是我的JS,我要在其中添加类customToolTip
function addBetTypeProductsToLegend(table) {
var betType = $.data(table, 'BetTableData').betType,
legendRow = $.data(table, 'BetTableData').legendRow,
productNotFount = true,
td;
$.each(betType.products, function(index,value) {
var betTypeHint = 'betTypeId_' + value.id + '_hint';
td = element.create('td');
element.setId(td, value.id);
element.setClassName(td, 'customToolTip'); // adding customToolTip class
element.setTitle(td, window[ 'betTypeId_' + value.id + '_hint']); // setting respective title tags
element.setInnerHtml(td, getBrandBetName(value.name));
legendRow.appendChild(td);
productNotFount = false;
});
// Racing Specials
td = element.create('td');
element.setId(td, betType.id);
element.setInnerHtml(td, betType.name);
if (productNotFount) legendRow.appendChild(td);
}
这就是我分配班级名称和标题属性的方式
var element = {
create: function(htmlIndentifier) {
return document.createElement(htmlIndentifier);
},
setClassName: function(element, className) {
element.className = className;
},
setTitle: function(element, title) {
element.title = title;
}
}
JS插件初始化
$(document).ready(function() {
$('.customToolTip').tooltipster({
animation: 'fade',
delay: 400,
theme: 'tooltipster-IB',
touchDevices: false,
trigger: 'hover'
});
});
因此,以上内容不适用于我尝试使用引导工具提示并像这样初始化函数的表单元格。
$(".customToolTip").tooltip({
placement : 'top'
});
除表单元格外,它对其他元素也很好用。
我也尝试为工具提示设置填充
$('.customToolTip').each(function(e) {
var p = $(this).parent();
if(p.is('td')) {
$(this).css('padding', p.css('padding'));
p.css('padding', '0 0');
}
$(this).tooltip({
placement: 'top'
});
});
我关注了其他几篇帖子,人们在其中遇到了工具提示和表格单元格
引导程序“ tooltip”和“ popover”的问题,从而在表格中添加了额外的大小
https://github.com/twbs/bootstrap/issues/5687
好像我稍后要处理布局问题时,我需要显示自定义工具提示而不是默认标题属性。
当表在DOM中尚不存在时,您的初始化从准备好文档开始。因此$('。customToolTip')找不到这些。
您需要做的是功能,如下所示:
function BindTooltips(target) {
target = target || $(document);
target.find('.customToolTip').tooltipster({
animation: 'fade',
delay: 400,
theme: 'tooltipster-IB',
touchDevices: false,
trigger: 'hover'
});
}
并准备好在文档上启动它,这样它将在您的文档中找到所有.customToolTip。
然后,在将表插入dom后,再次启动此函数并提供容器(表)作为参数。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句