1110
1110

Reputation: 6829

qTip and dynamically added elements issue

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

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

Once you have added new elements, reinitialize qTip plugin:

$('.ttip').filter(function(){return !$(this).data('qtip')}).qtip(...);

Upvotes: 2

Related Questions