Tooltips can interfere with each other if their 'parent' objects are in each others tooltip display area

[Jonathan Kirst]

Example

If you have two buttons, one on top of the other, and they both have tooltips, the button below will appear in front of the tooltip for the button above.

If you remove the tooltip from the button below, the tooltip above works fine as you'd expect.

Not sure what can be done here other than manually specifying z-indexes for each tooltip.

[Jonathan Kirst]

Current work around is pretty heavy handed, but it gets the job done:

 $("[class*='hint--']").hover(
  function(){
    $("[class*='hint--']").css("z-index", 0);
    $(this).css("z-index", 88888888);
  }, function(){
    $("[class*='hint--']").css("z-index", 88888888);
  }
);

[Kushagra Gour]

Hey @jskirst Can we have a reduced test case to see the issue on cssdeck/codepen?

[Jonathan Kirst]

Just tried, proved impossible. Went back and found a lurking css change in my own code to .hint z-index that caused the issue. Sorry about that.

Move along, nothing to see here.