How to prepend html into on page element from HTML onClick event?

Question

I am attempting set up the ability to dynamically generate "tooltip" popups when a user clicks on a specific element (a little question mark icon). These tooltips would be absolutely positioned relative to the icon that was clicked. Due to the nature of the site/information, I've decided I'd like the ability to call a javascript function using the onClick event in the html, then passing it a few parameters.

I am new to this kind of development, however, and I am having some issues getting this to work. I have all the html and css in place and styled appropriately but nothing happens "on Click". I don't get any console errors, but it doesn't appear that the html is being prepended properly, and It is beyond my capability to identify why.

Here is the code I've put together.

Javascript/jQuery:

function createTooltip(h4, p) {
    $(this).next('.dialog-anchor').prepend('<div class="dialog-container"><div class="tooltip-dialog"><h4>'+h4+'</h4><p>'+p+'</p></div><div class="bg"></div></div>');
};

HTML:

<a class="tooltip" onClick="createTooltip('Test Tooltip', 'blah blah blah blah blah blah blah blah blah')"><div class="dialog-anchor"></div></a>

Any insight or help would be greatly appreciated. I'm still learning and would benefit a great deal from having my mistakes pointed out.

Thanks in Advance!

Answer 1

You need to pass this as an argument to the function. The HTML attribute should be:

onClick="createTooltip(this, 'Test Tooltip', 'blah blah blah blah blah blah blah blah blah')"

And the jQuery should use .find() , not .next() , because the .dialog-anchor element is inside the anchor, not after it.

function createTooltip(elem, h4, p) {
    $(elem).find('.dialog-anchor').prepend('<div class="dialog-container"><div class="tooltip-dialog"><h4>'+h4+'</h4><p>'+p+'</p></div><div class="bg"></div></div>');
}

DEMO

You would use .next() if the HTML were like this:

<a>something</a><div class="dialog-anchor"></div>

Answer 2

Since you are using jQuery, how about make it use of it's listeners and add html data attributes?

<a class="tooltip" data-h4="Test Tooltip" data-p="blah blah blah blah blah blah blah blah blah">
    <div class="dialog-anchor">ANCHOR</div>
</a>

One thing that is wrong as well: $(this).next('.dialog-anchor') - .dialog-anchor is a child of .tooltip . next() is used when it's siblings, not childs. Use find instead.

$(function () { //jquery document.ready
    $('a.tooltip').on('click', function (e) {
        var $this = $(this);
        e.preventDefault();

        //dialog-anchor is a child of tooltip. NEXT is used when it's siblings
        $this.find('.dialog-anchor').prepend('<div class="dialog-container"><div class="tooltip-dialog"><h4>' + $this.data('h4') + '</h4><p>' + $this.data('h4') + '</p></div><div class="bg"></div></div>');
    });
});

http://jsfiddle.net/dg1t4f8c/3/