Form empty input

Question

Hi, I'm using the jQuery TOOLS - The missing UI library. For tooltip on all input fields I do

      $("#univers :input").tooltip({
   effect: 'slide',
   position: "center right",
   offset: [-2, 10],
   effect: "fade",
   opacity: 0.5,
   tip: '.tooltip'
  });

But I would like to show tooltip only if input field is empty. So I did

          $("#univers input:text[value=""]").tooltip({
   effect: 'slide',
   position: "center right",
   offset: [-2, 10],
   effect: "fade",
   opacity: 0.5,
   tip: '.tooltip'
  });

But this one doesn't work !

Any idea ?

Answer 1

That will only add the tooltip eventlistener to fields which are empty, it won't check if it is empty when you hover it.

I'm not familiar to the library you are using, and you did't post a link to it, but check if there is a callback function that is called just before the tooltip is displayed. Then you can check if the field is empty and return true or false depending to indicate if the tooltip should be shown or not.

EDIT

Have a look at the documentation for tooltip. There is a function called onbeforeshow, which does what I explained.

onBeforeShow: function() { 
  return (jQuery.trim($(this).val()) == "");
}

Answer 2

There are a few problems at play here.

First off, it has double quotes inside for the value, which means that it isn't valid syntax. You need to use single quotes so that the value will be a single string.

Try this:

$("#univers input[type=text][value='']")

Or even better:

$("#univers input:text[value='']")

Your second problem is that the selector doesn't automatically keep updating as fields get filled out. Therefore, you will be selecting all of the empty fields when the page loads, and even if they get filled out later, the callback will still get fired.

As Marius mentioned, you'll need to use the onbeforeshow callback to enable/disable the tooltip based on whether or not the field is actually empty.

Something like this should work:

// don't use [value=''] because a field that isn't empty at first might be empty later
$("#univers input:text").tooltip({
    effect: 'slide',
    position: "center right",
    offset: [-2, 10],
    effect: "fade",
    opacity: 0.5,
    tip: '.tooltip',
    onBeforeShow: function() {
        return this.value == ''; 
        // will return false if the value is not empty, 
        // returning false makes the tooltip not show
    }
});