QTip2多个元素,相同的工具提示
QTip2 Multiple Elements, Same Tooltip
我有一个页面,可以在其中动态创建需要工具提示的元素。
我尝试了几种不同的方法,并在网上寻找一些答案,但都无济于事。
截至目前,我有这个:
var $links = $('a.link');
var len = $links.length;
for(var i = 0; i < len; i++){
var $ele = $($links[i]);
$ele.qtip({
id: 'editLink',
overwrite: false,
content: {
text: $linkEditor,
title: {
text: 'Edit Link',
button: true
}
},
position: {
my: 'top center',
at: 'bottom center',
viewport: $(window)
},
show: {
event: 'mouseover',
solo: true
},
hide: false,
style: {classes: 'ui-tooltip-shadow ui-tooltip-red'}
});
}
我正在寻找的是让所有这些元素使用完全相同的工具提示的方法。我希望它们都使用完全相同的内容(在本例中为单个表单),并以完全相同的方式引用工具提示(通过id为"ui工具提示editLink"的工具提示元素)。
根据我所拥有的,它当前正确地创建了第一个工具提示,但如果我添加一个新元素并重新分配工具提示,它会为新元素创建一个具有不同id的全新工具提示。
有人知道如何实现多个元素,相同的工具提示方法吗?
我已经想出了如何让一个工具提示div被许多工具提示图像共享,如果有人觉得它很方便的话
$(".tooltipBearing").qtip({
content: {
text: $("#tooltipDiv").html()
}
});
如果您未能将.html()放在上面,您将看到共享工具提示显示一次,然后当您从另一个图像激活它时,它将不再适用于第一个图像。。。
工具提示轴承是在页面中的某些图像上设置的类。
tooltipDiv是包含工具提示内容的div的ID。
为了在动态创建的元素中使用qtip
,您需要在元素初始化期间包含qtip
。
例如
$('<div style="top:0px; left:0px; position:absolute;">abc123</div>').appendTo("body").qtip({content: "test"});
遗憾的是,我们似乎需要为每个悬停/单击元素克隆Tooltip元素。
Craig在GitHub上提到了这一点:https://github.com/Craga89/qTip2/issues/173
这就是我所做的。我在一个独特的元素上附加了我的工具提示。然后我所有其他需要相同工具提示的元素都会触发唯一元素的工具提示显示:
$('#unique-element').qtip({
content: {text: 'My Tooltip'},
});
$('.other-elements').click(function(){
$('#unique-element').qtip('show');
});
但是,所有工具提示都将显示在固定位置。这在我的情况下不是问题,因为我使用工具提示作为模态。您必须通过剪切event
方法来管理工具提示位置。
根据user738048的回答,我的工作解决方案如下:
$('[data-tooltipid]').each(function() {
var ttid = $(this).data('tooltipid');
$(this).qtip({
content: {
text: $('#'+ttid).html(),
},
position: {
my: 'top left',
at: 'bottom left',
target: $(this)
}
}).removeAttr('href').removeAttr('onclick');
});
在我的例子中,包含文本的HTML元素的id取自data-tooltipid
属性;我的href
和onclick
属性将被删除,因为它们已被工具提示废弃。
- d3.js svg元素上的角度UI工具提示
- 如何在d3工具提示的html元素中使用Angularjs过滤器
- 如何使用嵌入的HTML元素制作d3.js工具提示
- 如何在工具提示窗口小部件中获取悬停元素的id
- 使用输入元素作为工具提示中的内容
- 如何使工具提示从函数本身之外的元素工作
- jQuery UI 工具提示在源 DOM 元素移动时卡住打开
- 工具提示JavaScript在未给出“title”属性时会中断以下表单元素
- 在服务器端创建的 DIV 元素的工具提示
- 有没有办法强制工具提示显示在输入元素的特定位置
- 隐藏的“选择”元素上的工具提示不起作用
- 如何在 SVG 上的鼠标光标旁边显示工具提示,尽管网站上有非 SVG 元素
- 如何动态更改基于目标元素的绝对工具提示的位置
- 将引导工具提示绑定到 d3 动态创建的 SVG 元素
- 如何禁用标题工具提示!(was:如何在Javascript中获取事件目标后面的元素?
- 如何在更改元素后保留引导工具提示
- JqueryUI 工具提示可防止<选择>元素下拉列表在 IE 11 中保持关闭
- 如何为新加载的元素提供JQuery UI工具提示
- 具有绝对定位的工具提示元素被带有溢出:auto的容器剪切
- Prototype、jQuery和Bootstrap会在鼠标退出时隐藏工具提示元素