17

This is a bug report for Stack Overflow. I'm using Opera 91.0.4516.77 on Windows.

The tag popup is broken for the tag . When hovering the tag's name with the mouse pointer, an orange layer appears at the top of the page. For other tags, however, the popup works fine and appears as expected.

Broken tag popup in action

4
  • I can reproduce this on both Google Chrome 106.0.5249.119 and Safari 16.0 on Mac
    – The Thonnu
    Commented Oct 25, 2022 at 13:05
  • 8
    The bug is that the other tags lack that glorious, seasonally appropriate orange color, I assume.
    – Ryan M Mod
    Commented Oct 25, 2022 at 13:10
  • Also broken in the latest FF on Linux Mint 21. Weird that it's specific to that one tag though. Can't reproduce it on any other tags, though haven't looked particularly extensively Commented Oct 25, 2022 at 13:53
  • 5
    Looks like hovering over tags creates an HTML element with the id value [tag name] + '-container', and notify-container happens to be used elsewhere already. (At least, there are CSS rules for #notify-container that break things here.)
    – Ivar
    Commented Oct 25, 2022 at 14:08

2 Answers 2

12

As described by Ivar in a comment, the problem is down to how the HTML for the popup with information is built, since it uses the tag name as part of the HTML: Simplified, it is:

<div class="-container" id="{tag name here}-container"> 
    <!-- content -->
</div>

which for the tag would be:

<div class="-container" id="notify-container"> 
    <!-- content -->
</div>

Subsequently, this picks up all CSS rules defined for the #notify-container selector.


The messages shown in a #notify-container normally show at the top of the page in orange. For example, if a question you currently have in a tab is closed.

Question with a notification on the top reading "This question has been closed - no more answers will be accepted." The notification is on orange background.

To force a message to show, you can use the following JavaScript code in the browser dev tools:

StackExchange.notify.showMessages([{text: "hello world", messageTypeId: 1}]);

Example of a regular message that shows at the top of the page. It is the text "hello world" on an orange background.

1
  • 1
    This is why it’s a bad idea to store arbitrary information in the id attribute and pollute the namespace of possible IDs. Commented Oct 31, 2022 at 18:39
3

Thank you for reporting the issue and providing the excellent diagnostic details! The logic to generate tooltip container ids has been updated to be much more specific -- no other potential collisions with other ids or with the #notify-container have been identified.

You must log in to answer this question.

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