13

Tooltip banner has blinking when mouse cover the golden badge for closed questions.

For example, here:

blinking

Windows 7, FF 50.0. (To reproduce, use a small screen or resize the window)

  • No repro on chrome. – Patrick Hofman Nov 28 '16 at 12:49
  • 1
    Yeh repro here on Chrome. It happens when you hover over the part of the notice that overlaps the tag bade (I guess hovering the notice loses focus on the badge which hides the notice which moves focus back to the badge which shows the notice, ad infinitum) – Cai Nov 28 '16 at 13:12
  • Repro on Windows 7 Home Premium 64 bit, Firefox 50.0 - mouse has to over the C++ part of the badge for me. If I go left it stops. – DavidPostill Nov 28 '16 at 14:46
  • I remember seeing this in FF on macOS as well. – Glorfindel Nov 28 '16 at 16:23
  • 2
    Looks the same kind of bug as this one, hopefully similar fix can be applied. – Shadow Wizard Nov 28 '16 at 16:24
  • The problem is that the tooltip is displayed on mouseover of the badge, but once the tooltip is shown, the mouseout of the badge is triggered, hiding the tooltip. If you keep your mouse on the left side of the badge, the tooltip will stay. – Glorfindel Nov 28 '16 at 16:27
1

The real bug is in the StackExchange.helpers.showMessage() function, as defined in https://cdn-dev.sstatic.net/Js/stub.en.js, which fails to account for the fact that the height of the message box can depend on its position on the page. In particular, if the requested position of the message is too close to the right edge of the page, moving it into that position can make its content wrap, and thus push down the lower edge of the message.

A proper fix would be to rewrite that function to first correctly position the message element horizontally, and only then calculate its height and vertical position.

Failing (or, possibly, in addition to) that, a simple work-around would be to explicitly specify a reasonable fixed width (say, 500px or so) for the dupe hammer tooltip, so that it won't normally be wide enough to hit the right side of the page. Better yet, the maximum width could be calculated dynamically based on the position of the tag icon on the page.


The next version of my SOUP user script will include a hotfix that dynamically sets the maximum width of all tooltips created with showMessage() based on the available space. In case any SE devs would like to borrow the code, here's the part that actually does the calculation:

// calculate horizontal position of the message tip
var tipLeft = $elem.offset().left;
if ( /right/.test( options.position.at ) ) tipLeft += $elem.outerWidth(true);
else if ( /^(top|bottom) center$/.test( options.position.at ) ) tipLeft += $elem.outerWidth(true) / 2;
var tipRight = $(document).width() - tipLeft;

// calculate space available for the message
var maxWidth = -1;
if ( /left/.test( options.position.my ) ) maxWidth = tipRight;
else if ( /center/.test( options.position.my ) ) maxWidth = Math.min(tipLeft, tipRight) * 2;
else if ( /right/.test( options.position.my ) ) maxWidth = tipLeft;
if ( /^(left|right)/.test( options.position.my ) ) maxWidth -= tipSize;

// XXX: refuse to set an absurdly small max-width
if ( maxWidth >= 50 ) {
    if ( ! options.css ) options.css = {};
    options.css['max-width'] = Math.floor(maxWidth) + 'px';
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .