Tooltip banner blinking for question closed by the user with the golden badge in small screens

Question

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

For example, here:

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

Answer 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';
}