Button in a Tipsy Tooltip not firing an onClick event

Question

I've set up this (updated) JSFiddle demonstrating what I am trying to do, but basically I think this is a situation of event bubbling. I am trying to position (in a tool tip) a button that when clicked on will change the value of the input that the tool tip is triggering on. The problem I'm seeing is the button 'Click' event is never firing. Any ideas on how to make this work?

Here is the simple code (this is using jQuery 1.7.2 and Tipsy 1.0.0a):

<input type="text" title="<button class='Action'>Add Balance</button>" name="Balance"/>
<button class='Action'>Add Other Balance</button>

$(document).ready(function() {
    $('input[name="Balance"]').tipsy({
        trigger: 'focus',
        gravity: 'n',
        html: true
    });
    $('button.Action').click(function() {
        $('input[name = "Balance"]').val($(this).html());
    });
});

score 1 · Accepted Answer · answered Jul 09 '12 at 18:26

The issue is that the click on the button element in the tooltip is causing the input to emit a 'focusout' event that's being caught by tipsy and removing it - and its children - from the DOM before the click event can bubble up.

Here's a demo of it working, but only because the removal parent tipsy element is delayed:

HTML:

<input title="<button class='action'>Add Balance</button>" name="balance"/>
<button class='action'>Add Other Balance</button>

JS:

$(document).ready(function() {
    $(this).on('click', '.action', function() {
        $('input[name=balance]').val($(this).html());
    });

    $('input[name=balance]').tipsy({
        trigger: 'focus',
        gravity: 'n',
        html: true,
        delayOut: 1000 // Delay allows 'click' to fire
    });
});

(I've taken the liberty of normalising your classnames)

I'm starting to appreciate the opinion that user input in a tooltip is a bad UI choice. I think what I'm looking for is something like the iOS Copy/Past functionality — Jason Sperske, Jul 10 '12 at 16:22
Here is an implementation that is close to what I settled on http://jsfiddle.net/vryAz/6/ in case anyone else tries to solve this. — Jason Sperske, Jul 10 '12 at 16:33

Control Freak · Answer 2 · 2012-07-09T18:12:14.857

Try initializing the Button in your title attribute, its probably not firing because the click() function for your button doesn't see a button there, and I couldn't find a callback function in the docs for this plugin.

Here's what I'm thinking:

      function initButton() { 
          $('button.Action2').click(function() {
              $('input[name = "Balance"]').val($(this).html());
          });
         }

      <input type="text" title="<button class='Action2'>Add Balance</button><script>initButton();</script>" name="Balance"/>
      <button class='Action'>Add Other Balance</button>

      $(document).ready(function() {
          $('input[name="Balance"]').tipsy({
              trigger: 'focus',
              gravity: 'n',
              html: true
          });
          $('button.Action').click(function() {
              $('input[name = "Balance"]').val($(this).html());
          });
      });

You are completely right about the nonworking JavaScript code (I was hasty in setting up the JSFiddle). I've fixed it and added an extra button tot show that the $('button.Action') is working but the button in the tooltip isn't firing. Tipsy will allow (invalid) html in tooltip (you have to pass {html: true}, but it seems ot be interfering with the event firing — Jason Sperske, Jul 09 '12 at 18:03

algiecas · Answer 3 · 2012-07-09T18:19:00.407

0

I believe that the tooltip is being closed when the input looses focus. This happens before the click on the tooltip can be registered.

In this case you should open and close the tooltip manually.

Code for triggering Tipsy manually can be found here: http://onehackoranother.com/projects/jquery/tipsy/

Edit: I did it for you: http://jsfiddle.net/xJQLu/3/

edited Jul 09 '12 at 18:19

answered Jul 09 '12 at 18:06

algiecas

2,108
14
13

Button in a Tipsy Tooltip not firing an onClick event

3 Answers3