How to disable title tooltips! (was: How to get element behind event target in Javascript?)

Question

I have an element positioned on top of another element, how do I ignore the click capture of the top element and pass it to the one below it?

$('a[title]').each(function (index) {
    $(this).after('&lt;div class="overlay" style="position:absolute;background:url(../Images/space.gif);width:100px;height:100px;top:0;left:0;z-index:300"></div>')
})

The reason is because this bit of code is preventing the title tooltip from popping-up. The hover pseudo-class still works on the link behind it because it is attached to the element containing them both, like so:

li:hover a { ... }

looks like all your links have an element with the same `id` *overlay* on top of them... — RASG, Apr 20 '12 at 20:40

gotofritz · Answer 1 · 2012-04-20T20:56:27.760

0

Please post a sample markup we can work with. Normally you just attach the event handler to the element you want, I don't understand what is the problem you are experiencing.

EDIT If I understand correctly this is some sort of tooltip and you want the user to pass on the click event. For a start, you can't use id="overlay" in a loop, because ids need to be unique. A simple way would be to create an event handler using .bind for pre-1.7 jquery, or on for 1.7

$('a[title]').each(function (index, el) {
      var $tooltip = $( '<div id="overlay-' + index  + '" />' ) 
                         //let JQuery create the CSS instead of using a style tag
                         .css({ position   : "absolute"
                              , background : "url(../Images/space.gif)"
                              , width   : 100
                              , height  : 100
                              , top     : 0
                              , left    : 0
                              , zIndex  : 300
                             })
                         //attach click handler to div
                         .on( 'click', function( e ){
                               $( el ).trigger( 'click' );
                            });
      $(this).after( $tooltip );
})

edited Apr 20 '12 at 20:56

answered Apr 20 '12 at 19:24

gotofritz

3,341
1
31
47

mmm... sorry, I still can't work out why are you trying to do what you are trying to do. You have a bunch of links and you are attaching an empty HTML string after each of them? It doesn't make sense. – gotofritz Apr 20 '12 at 19:38
sorry, didn't realize the code wasn't displayed right... putting a transparent block on top of the links with title attributes. – Dathan Apr 20 '12 at 19:39
That's awesome, but I keep getting an error that there is no trigger function. – Dathan Apr 20 '12 at 20:55
sorry my bad - try again changed to $( el ).trigger( 'click' ); – gotofritz Apr 20 '12 at 20:56
Well then I can't help without seen the whole page, sorry – gotofritz Apr 20 '12 at 21:10
Okay, figured it out, the document click handler was messing it up. Thanks for your help! – Dathan Apr 20 '12 at 23:04

score 0 · Answer 2 · answered Apr 20 '12 at 20:43

0

looks like all your links have an element with the same id overlay on top of them.

remove the id and add a class to your transparent block div.

then add a click event to this class doing what you want with the parent element.

answered Apr 20 '12 at 20:43

RASG

5,988
4
26
47

It's not actually a parent element that I'm targeting. It's a link with a div on top of it. I want the click event to pass through the div to trigger the link. – Dathan Apr 20 '12 at 21:11

score 0 · Answer 3 · answered Mar 18 '20 at 21:46

-------Solution----------

 $('a[title]').each(function (index, el) {
    var $tooltip = $('<div class="overlay-' + index + '" />')
                         .css({
                            position: "absolute"
                            , background: "url('../Images/space.gif')"
                            , width: $(el).width()
                            , height: $(el).height()
                            , top: 0
                            , left: 0
                            , zIndex: 300
                            , border: "1px solid red"
                         })
                         .on('click', function (event) {
                             $(el).click();
                         });
    $(this).after($tooltip);
})

[Moved OPs solution from an edit to a community wiki.](https://meta.stackoverflow.com/questions/267434/what-is-the-appropriate-action-when-the-answer-to-a-question-is-added-to-the-que) — Brian Tompsett - 汤莱恩, Mar 18 '20 at 21:47

How to disable title tooltips! (was: How to get element behind event target in Javascript?)

3 Answers3