Tooltip for input to my div on click

Question

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

Answer 1

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)
      });
});

DEMO