Reputation: 6829
I have page with UpdatePanel
where I add some forms on click on the page.
In those new added elements I have images that must use qTip
.
I have this:
$(document).ready(function () {
$('.ttip').qtip({
content: $(this).attr('tooltip'),
show: 'click',
hide: 'click',
position: {
my: 'top right',
at: 'bottom center'
},
style: { classes: 'ui-tooltip-light' }
});
});
And this works with elements that are visibile in the begining.
All elements that use qTip
have runat="server"
attribute.
BUT when I add new element with class ttip
it doesn't work.
Exloring I see that the elements that are visible in the beggining have attribute:
data-hasqtip="6"
But dynamically added elements doesn't have this attribute.
How can I workaround this?
How to make this somehow live?
UPDATE BASED ON ANSWER
I have added this in code behind where I make element visible:
// Button click handler that add new element to page
public void AddNewElement(Image image)
{
image.Visible = true;
image.ToolTip = "blah";
ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
"tmp",
@"<script type='text/javascript'>
$('.ttip').filter(function(){return !$(this).data('qtip')}).qtip(
content: $(this).attr('tooltip'),
show: 'click',
hide: 'click',
position: {
my: 'top right',
at: 'bottom center'
},
style: { classes: 'ui-tooltip-light' }
);
</script>",
false);
}
But it still doesn't work :(
Upvotes: 0
Views: 533
Reputation: 74420
Once you have added new elements, reinitialize qTip plugin:
$('.ttip').filter(function(){return !$(this).data('qtip')}).qtip(...);
Upvotes: 2