How to remove tooltip when hovering an inner object?

Question

I have an outer div with an image inside, both have tooltips. Clicking either element performs a different action:

Clicking the outer div, selects the image.
Clicking the inner img, opens the image.

I'd like to differentiate the actions, so when the image is hovered, the outer tooltip doesn't show up.

Here's the html:

<div class="outer-tip"  title="SELECT image"  data-toggle="tooltip">
  <a class="inner-tip"  title="OPEN image"    data-toggle="tooltip">
    <img src="...">
  </a>
</div>

Here's a FIDDLE with no attempts to fix this: https://jsfiddle.net/qmskzah6/
Here's one where I try z-index: https://jsfiddle.net/qmskzah6/1/
Here's where I move the image outside the div: https://jsfiddle.net/qmskzah6/2/

3 is the closest to what I want, but if you add more images it gets janky, as seen here: https://jsfiddle.net/qmskzah6/3/

I can probably mangle my way to something that works, but I'm wondering if there is a built-in or more elegant way to do this?

score 1 · Answer 1 · answered Oct 17 '18 at 19:01

Use the container option...

$('[data-toggle="tooltip"]').tooltip({container:'.outer-tip'});

And, then add CSS to hide the outer tooltip when the inner is hovered.

.inner-tip:hover + .tooltip {
   display:none !important;
}

https://www.codeply.com/go/eJOvE5qRdU

score 0 · Accepted Answer · answered Oct 18 '18 at 17:11

Since it seems like there is no 'built-in' option, I felt better about making a custom solution:

$( '[data-toggle="tooltip"] [data-toggle="tooltip"]' ).hover( 
    e => { // mouseIn
        var t = $( e.target ).parents( '[data-toggle="tooltip"]' ).siblings('.tooltip');
        if( t.is( ':visible' ) )
            t.hide(  );
    }, 
    e => { // mouseOut
        var t = $( e.target ).parents( '[data-toggle="tooltip"]' ).siblings('.tooltip');
        if( t.is( ':hidden' ) )
            t.show(  );
    }
);

I'll go through line-by-line and explain the solution:

$( '[data-toggle="tooltip"] [data-toggle="tooltip"]...

1. This selector makes sure we only target nested tooltips.

e => { // mouseIn

2. We need different functions for the mouse in and out events. There's perhaps a more efficient way to do this, but I think this promotes readability.

var t = $( e.target ).parents...

3. Initially, I just performed the show/hide on this parent element, but it had a side-effect: moving from the inner toooltiped element back to the outer one caused the outer tooltip to only flash once, then was hidden again until the next hover. I created the t var since it will be used more than once.

if( t.is( ':visible' ) )

4. Logging the mouseIn/Out events showed they were called 3 times per single event. I'm not sure why that happened, but adding the check to make sure it was hidden/visible - before reversing it - fixed the issue.

Note: Zim's answer works in the sandbox, but I didn't want to mess with the tooltip init and risk breaking tooltips in other places. My app is very large.

How to remove tooltip when hovering an inner object?

2 Answers2