jQuery tooltip random appear

Question

I am developing this "logo colors". I need the tooltip to appear in a DIV where id is #show after I click (this is OK). But after hover the buttons the tooltip is appearing anywhere it wants.

Visit my problem here: http://web-stranky.org/pro_dementa/

$(document).ready(function () {
    $( document ).tooltip( {
        content:  function() {
            return  $( this ).attr( "title" );
        }
    });      
    $('button').click(function(){
        $('#show').html($('#' + $(this).attr('aria-describedby')).children().html());
    });
});

Answer 1

You have not included jquery-ui.css. Just add it in document and everything will be fine!!

You can get it from here

UPDATE

If you need it in the div the along with html add title attribute too and as below remove the title attribute from other elements

$('#show').html($('#' + $(this).attr('aria-describedby')).children().html());

$('#show').attr('title',$('#' + $(this).attr('aria-describedby')).children().html()); //add this