I want my tooltip to appear in the div (see picture) after the user clicks on the input. Nothing will be in this div until the user clicks on the input.
My jQuery :
$("#orderform :input").tooltip({ // place tooltip on the right edge position: "bottom right", // a little tweaking of the position offset: [0, 10], // use the built-in fadeIn/fadeOut effect effect: "fade", // custom opacity setting opacity: 0.7 }); 
My jsFiddle CLICK
If I understand your question correctly, you want the div on the right to only appear when the user clicks on the input field. This does not require a tooltip. Tooltips are designed to appear over the trigger object or very near to it. You have a static object that you want to show or hide based on another object. Since you are using an input field, you can use the focus and blur events to trigger the fadeIn and fadeOut methods respectively.
The jQuery:
$(document).ready(function() { $('.komunikat').hide(); //hide the div $('#orderform :input').focus(function(){ $('.komunikat').fadeIn(); //show the div when the input is in focus (clicked or tabbed) }); $('#orderform :input').blur(function(){ $('.komunikat').fadeOut(); //hide the div when the input is out of focus (blurred) }); });
$( ".selector" ).tooltip( "open" );