Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Your problem may be that you haven't properly set the z-index of the balloon to be higher than your the modal dialog.</p> <pre><code>$('.balloon').css('z-index','9999'); </code></pre> <p>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):</p> <pre><code>$(this).balloon({ position : "top right", showDuration : 125, minLifetime : 2000, tipSize : 4, z-index : 9999 }); </code></pre> <p><strong>Update Based on Feedback</strong></p> <p>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.</p> <p>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:</p> <pre><code>#pin { z-index: 99999 } </code></pre> <p>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:</p> <blockquote> <p>Default contents of balloon is its title. If the element has no title, balloon is not created.</p> </blockquote> <p>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:</p> <pre><code>&lt;input type="password" name="pin" id="pin" maxlength="4" size="5" value="" title="Correct Pin!" /&gt; </code></pre> <p>I created a <a href="http://jsfiddle.net/sgWG4/" rel="nofollow">little demo on jsfiddle</a> to show how everything comes together.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload