jQuery balloons

Question

Does anyone know if you can use a jQuery balloon on a text input that is contained on a jQuery modal dialog?

<div id="dlg-clock_in_out">
  <section class="roundbox-sml" style="padding:5px; 5px;">
    <input type="hidden" name="empid" id="empid" value="" />
    <div style="width:100%; text-align:center;">
      <label for="pin">PIN: </label><input type="password" name="pin" id="pin" maxlength="4" size="5" value="" />
    </div>
    <div id="login-btns-wrapper">
      <input type="button" id="loginSubmit" class="buttons roundbox-sml" value="<?=$btn_text?>" />
      <input type="button" class="buttons roundbox-sml" name="loginCancel" id="loginCancel" value="Cancel" />
    </div>
  </section>
</div>

<script type="text/javascript">
  $('#pin').keypress(function(e) {
    if(check_pin_chars(String.fromCharCode(e.which))) {
      $(this).val('');
      $(this).balloon({
        position     : "top right",
        showDuration : 125,
        minLifetime  : 2000,
        tipSize      : 4
     });

     $(this).showBalloon();
   }
});

And the jquery I want to use when this modal dialog is shown is supposed to put a balloon next to the input field, but I don't know if a balloon can exist on an element residing in a jquery modal dialog.

Does anyone know if this is possible? I know how to do it for a standard form input element. It's just not showing up on my modal dialog.

Here's what I'm attempting to use to accomplish this. http://file.urin.take-uma.net/jquery.balloon.js-Demo.html

Thanks.

Answer 1

Your problem may be that you haven't properly set the z-index of the balloon to be higher than your the modal dialog.

$('.balloon').css('z-index','9999');

It may also be an option with your JavaScript (I don't know if you are using a library you wrote or one you found elsewhere):

$(this).balloon({
    position     : "top right",
    showDuration : 125,
    minLifetime  : 2000,
    tipSize      : 4,
    z-index      : 9999
 });

Update Based on Feedback

I was pretty close to right with my answer. There are actually two issues with your code and why you are not seeing a balloon.

First, I was right about the z-index. However, you have to set the z-index in the CSS, not directly in the balloon options. So, in your case, it would be:

#pin {
 z-index: 99999
}

However, the other problem that you have comes from your default options. Here is the key wording in the documentation on the jquery.balloon.js site:

Default contents of balloon is its title. If the element has no title, balloon is not created.

Because you didn't provide content in your options, you won't see any balloon because there is nothing it can display. So, since you are displaying it with respect to your pin password box, you have to add either a content option, or add a title to your password box. Something like this:

<input type="password" name="pin" id="pin" maxlength="4" size="5" value="" title="Correct Pin!" />

I created a little demo on jsfiddle to show how everything comes together.