我有很多控件,如下所示:
<div style="display: inline;">
<span id="cvCaptcha-Target" class="ttTarget">
<asp:CustomValidator ID="cvCaptcha" runat="server" Display="Dynamic" OnServerValidate="cvCaptcha_ServerValidate">
<asp:Image ID="img4cvCaptcha" CssClass="imgValidate" runat="server" AlternateText="attention"
ImageUrl="~/Images/Login/Exclamation.png" />
</asp:CustomValidator>
</span>
<div id="cvCaptcha-Content" class="ttContent">
captcha is incorrect!!!
</div>
</div>
正如您所看到的,我将每个控件的ttContent放在它的下面(在div中),并且我有许多带有ttTarget类的控件。。。
鼠标跟踪器工具提示的qtip2代码如下所示:
$('#target').qtip({
content: 'i am tool tip',
position: {
my: 'top left',
target: 'mouse',
viewport: $(window), // Keep it on-screen at all times if possible
adjust: {
x: 10, y: 10
}
},
hide: {
fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
},
style: 'ui-tooltip-shadow'
});
当我们为qtip使用id s时,一切都很简单,我们可以很容易地找到目标的内容
但在我的场景中,我有很多id,我不知道如何通过上层代码识别它们的内容!
我的意思是:
$('.ttTarget').qtip({
content: '______________' -> here is my problem (how can i find ttContents),
position: {
my: 'top left',
target: 'mouse',
viewport: $(window), // Keep it on-screen at all times if possible
adjust: {
x: 10, y: 10
}
},
hide: {
fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
},
style: 'ui-tooltip-shadow'
});
提前感谢
方式1:
$(function () {
$('.ttTarget').qtip({
overwrite: false,
content: {
text: function (api) {
return $(this).parent('div').find('div.ttContent').html();
}
},
position: {
my: 'top left',
target: 'mouse',
viewport: $(window),
adjust: {
x: 10, y: 10
}
},
hide: {
fixed: true
},
style: 'ui-tooltip-shadow'
});
方式2:
$('.ttTarget').live('mouseover', function (event) {
//alert($(this).next('div.ttContent').text());
//alert($(this).parent('div').find('div.ttContent').html());
$(this).qtip({
overwrite: false,
content: $(this).parent('div').find('div.ttContent').html(),
position: {
my: 'top left',
target: 'mouse',
viewport: $(window),
adjust: {
x: 10, y: 10
}
},
hide: {
fixed: true
},
show: {
event: event.type,
ready: true
},
style: 'ui-tooltip-shadow'
}, event);
});