CODEWITHSUNDEEP
javascriptjqueryhtmlformstooltip
Kubol
Kubol

Reputation: 136

Tooltip for input to my div on click

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

      });

Screen

My jsFiddle CLICK

Upvotes: 0

Views: 956

Answers (1)

zsaat14
zsaat14

Reputation: 1118

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

Upvotes: 1

Related Questions