嗨,
我正在使用qTip在我的网站上,文档就绪功能如下所示:
$.fn.qtip.styles.mystyle = { // Last part is the name of the style
width: 200,
background: '#ebf1ff',
color: 'black',
textAlign: 'center',
border: {
width: 1,
radius: 4,
color: '#AACCEE'
},
tip: 'bottomLeft',
name: 'dark'
}
$('.controlTitleContainer .icon').qtip({
content: $(this).find('.tooltip').html(),
position: {
corner: {
target: 'topRight',
tooltip: 'bottomLeft'
}
},
style: 'mystyle'
});
第一部分仅用于样式,但第二部分将填充 qtip。
我的 HTML 看起来像这样:
<div class="controlTitleContainer">
<div class="text">
<label for="ModelViewAd_Title">Titel</label>
</div>
<div class="icon">
<div class="toolTip">MyToolTipTest</div>
</div>
</div>
注意:类 toolTip 设置为 Display : none,并且 class="icon"div 将显示工具提示
我会在页面上有很多这样的 html 片段,但它将包含不同的数据,我需要的是工具提示来显示 .这是可能的还是我必须为每个这样的 HTML 片段生成 qtip 声明?
请多多指教
致以诚挚的问候
最佳答案
为什么不这样呢?
$(document).ready(function(){
$.each($(".tooltip"), function(i,val){
$.fn.qtip.styles.mystyle = {
width: 50,
background: '#ebf1ff',
color: 'black',
textAlign: 'center',
border: {
width: 1,
radius: 4,
color: '#AACCEE'
},
tip: 'bottomLeft',
name: 'dark'
}
var theContent = $(val).html();
$(val).qtip({
content: theContent,
position: {
corner: {
target: 'topRight',
tooltip: 'bottomLeft'
}
},
style: 'mystyle'
});
});
});
这样,任何具有 class="tooltip"
的 div
都会自动启用 qTip。这实际上就是我在我的元素中所做的。
这是我的测试 HTML:-
<div class="controlTitleContainer">
<div class="text">
<label for="ModelViewAd_Title">Titel</label>
</div>
<div class="icon">
<span class="tooltip">MyToolTipTest</span>
<span class="tooltip">MyToolTipTest2</span>
<span class="tooltip">MyToolTipTest3</span>
</div>
</div>
关于jquery - 使用 qtip 到多个地方但内容不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4961525/