qtip2 tooltip - mouse tracker - how find content of many controls with a same class?
i have many controls like below :
<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>
&l开发者_StackOverflow中文版t;/div>
as you see i put the ttContent of each control in the below of it (inside a div) and i have many controls with ttTarget class...
the qtip2 codes for mouse tracker tooltips is like below :
$('#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'
});
when we use id s for qtip every thing is so simple and we can find target's content easily!
but in my scenario i have many id s that i do n't know how can i recognize their content by the upper code !i mean :
$('.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'
});
thanks in advance
Way 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'
});
way 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);
});
精彩评论