Jquery : How to trigger a click event when input focus is enable

Question

I have an input field. On its focusin event I am opening a tooltip and on its focuout I am closing the tooltip. But now I am having a link on tooltip and what I want to do to make that link clickable. But when I start focusing input and go to that tooltip link and try to click than the input's focusout event gets called first and the tooltip gets closed. So I was unable to click that link. Here is my code :

html:

<div class="block"><input type="text" class="field-input"/><div class="tooltip">
<a href="#">tooltip link</a></div>

css:

.block{position:relative;}.tooltip{position:absolute;right:0;display:none;bottom:0;}

jquery:

$('.field-input').on('focusin', function(){
$('tooltip').show();
});
$('.field-input').on('focusout', function(){
    $('tooltip').hide();
});
$('.tooltip a').on('click', function(){
    ... do something
});

Sergio Alen · Accepted Answer · 2017-02-03 04:56:10Z

2

You could remove the focusout event binding when the mouse enters the tooltip and add it back when the mouse leaves:

$('.tooltip').on({
  mouseenter: function(){
    $('.field-input').off('focusout');
  },
  mouseleave: function(){
    $('.field-input').on('focusout', function(){
      $('.tooltip').hide();
    });
  }
});

answered Feb 3, 2017 at 4:56

Sergio Alen

7245 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sharjil Khan Over a year ago

Thanks Sergio, I never had an idea that it would be really simple.

luiscrjr · Accepted Answer · 2017-02-03 05:17:48Z

0

You can use relatedTarget to capture the element that is receiving the focus, and hide tooltip only if the clicked element is not the tooltip anchor.

From the docs:

The MouseEvent.relatedTarget read-only property is the secondary target for the event, if there is one. That is:

focusout: The EventTarget receiving focus

Something like that:

$('.field-input').on('focusout', function(e){
    var tooltipHolder = $('.tooltip');
    var tooltipAnchor = tooltipHolder.find('a');
    if (e.relatedTarget !== tooltipAnchor[0]) tooltipHolder.hide();
});

answered Feb 3, 2017 at 5:17

luiscrjr

7,2783 gold badges28 silver badges28 bronze badges

Collectives™ on Stack Overflow

Jquery : How to trigger a click event when input focus is enable

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related