qTip not showing on dynamically added elements by other javascript code

This is my qTip settings:

<script>

    $(document).ready( function () {

        $('.hasTooltip').each(function() {
            $(this).qtip({
                content: {
                    text: $(this).next('div').html()
                },
                position: {
                    my: 'bottom center', 
                    at: 'top center',
                    target: $(this)
                },
                show: {
                    event: 'click mouseenter',
                    solo: true,
                    effect: function(offset) {
                        $(this).fadeIn(100);
                    }
                },
                hide: {
                    fixed: true,
                    delay: 300
                }
            });
        });

        show_registration_form(); // add HTML form with qTip tootlip elements

        function show_registration_form() {

            $(".content-area").append('<form action="" method="POST"></form>');

            var form2Html = [

                '<input type="text" value="" name="username" id="username">',
                '<input type="email" value="" name="email" id="email">',

                // ... standard form content

            ].join('');

            $(".content-area form").append(form2Html);

        }

    });

</script>

And this is my html added via a function that is called from my custom js code:

<div class="hasTooltip">Hover me to see a tooltip</div>
<div class="hidden">This is just a test! <a href="http://google.com">Link test</a></div>

How to make qTip work on dynamically added elements too?

UPDATE:

I have added more code and comments including the function that adds HTML elements that contains qTip tooltips dynamically.

You have to execute the $().qtip(); on every element you dynamically add after they've been added.

At the moment, you add the qTips right after the page is ready, then add the new elements and then nothing.

I haven't tested this, might need tweaking, but try this code, this tries to add the tooltip to the dynamically added username and email input fields:

$(document).ready( function () {
  $('.hasTooltip').each(function() {
        qTipAdd(this);
  });

  show_registration_form(); // add html form with elements from my custom js function

});

function show_registration_form() {
    $(".content-area").append('<form action="" method="POST"></form>');

    var form2Html = [

        '<input type="text" value="" name="username" id="username">',
        '<input type="email" value="" name="email" id="email">',

        // ... standard form content
    ].join('');

    $(".content-area form").append(form2Html);

    qTipAdd('#username');
    qTipAdd('#email');
}

function qTipAdd(element) {
    $(element).qtip({
        content: {
            text: $(this).next('div').html()
        },
        position: {
            my: 'bottom center', 
            at: 'top center',
            target: $(this)
        },
        show: {
            event: 'click mouseenter',
            solo: true,
            effect: function(offset) {
                $(this).fadeIn(100);
            }
        },
        hide: {
            fixed: true,
            delay: 300
        }
    });
}