jph-FLOR-1962 Add auto overflow tooltip for menu items#11
Open
jph-FLOR-1962 Add auto overflow tooltip for menu items#11
Conversation
Introduce automatic overflow tooltips for .blue-menu-item: add src/js/menu-item-tooltip.ts (ResizeObserver/MutationObserver based) which sets data-tooltip/title and toggles blue-tooltip-end on truncated labels, and exposes init/update/destroy on window.blueWeb.menuItemOverflowTooltips. Import the new script in site layout. Add CSS rule to display tooltip-enabled menu items inline-flex. Update docs and examples (site public llms.txt, search-index.json, and Menu Item.mdx) to show the overflow tooltip, adjust various example class names (BLUE- → blue-), and add several UI/docs snippets (Header, .blue-label, utilities, intro changes).
Contributor
There was a problem hiding this comment.
Pull request overview
Adds automatic “overflow-only” tooltips to .blue-menu-item labels, wiring it into the docs site so truncated menu items get a tooltip without manual markup.
Changes:
- Introduces
menu-item-tooltip.ts(ResizeObserver/MutationObserver-driven) to auto-setdata-tooltipand tooltip positioning class when labels are truncated. - Loads the new script from the docs site layout to activate the behavior globally.
- Updates styling/docs assets to support and demonstrate the new tooltip behavior.
Reviewed changes
Copilot reviewed 5 out of 6 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
src/js/menu-item-tooltip.ts |
New runtime that detects truncated menu labels and applies/removes tooltip attributes/classes; exposes init/update/destroy on window.blueWeb. |
site/src/layouts/Layout.astro |
Imports the new tooltip script so it runs on the documentation site. |
dist/styles/_menu-item.scss |
Ensures tooltip-enabled menu items keep inline-flex layout even when tooltip classes apply inline-block. |
site/public/llms.txt |
Documentation/examples updated to reflect new/renamed classes and show tooltip behavior. |
site/public/search-index.json |
Updates docs search index entries to match the new/updated docs pages. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+117
to
+120
| mutationObserver = new MutationObserver(() => scheduleUpdateAll()) | ||
| if (document.body) { | ||
| mutationObserver.observe(document.body, { childList: true, subtree: true, characterData: true }) | ||
| } |
Comment on lines
+138
to
+152
| export function destroyMenuItemOverflowTooltips() { | ||
| resizeObserver?.disconnect() | ||
| mutationObserver?.disconnect() | ||
|
|
||
| if (resizeHandler) { | ||
| window.removeEventListener("resize", resizeHandler) | ||
| } | ||
|
|
||
| resizeObserver = null | ||
| mutationObserver = null | ||
| resizeHandler = null | ||
| observedLabels = new WeakSet<HTMLElement>() | ||
| initialized = false | ||
| started = false | ||
| } |
Comment on lines
+123
to
+131
| export function initMenuItemOverflowTooltips() { | ||
| if (initialized) return | ||
| initialized = true | ||
|
|
||
| if (document.readyState === "loading") { | ||
| document.addEventListener("DOMContentLoaded", start, { once: true }) | ||
| } else { | ||
| start() | ||
| } |
Comment on lines
+55
to
+58
| if (resizeObserver && !observedLabels.has(labelElement)) { | ||
| resizeObserver.observe(labelElement) | ||
| observedLabels.add(labelElement) | ||
| } |
Comment on lines
+60
to
+68
| const hasManualTooltip = | ||
| (menuItem.hasAttribute(TOOLTIP_ATTR) && menuItem.getAttribute(AUTO_TOOLTIP_ATTR) !== "true") || | ||
| (menuItem.hasAttribute("title") && menuItem.getAttribute(AUTO_TOOLTIP_ATTR) !== "true") | ||
|
|
||
| if (hasManualTooltip) { | ||
| return | ||
| } | ||
|
|
||
| const text = getTooltipText(labelElement) |
lgk-bsw
requested changes
Mar 30, 2026
Member
There was a problem hiding this comment.
Statt, dass das Script speziell auf .blue-menu-item abgestimmt ist, sollte es besser ein allgemeiner Detector als Funktion dafür sein, ob Overflow auf einem Element vorhanden ist. So kann er auch für andere Stellen verwendet werden und auch andere Dinge als nur Tooltip über "blue-tooltip-*" zu setzen.
In Blue React und Blue Blazor kann dann in der MenuItem-Komponente diese Funktion verwendet werden und mit der jeweils empfohlenden Art ein Tooltip erstellt werden.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Introduce automatic overflow tooltips for .blue-menu-item: add src/js/menu-item-tooltip.ts (ResizeObserver/MutationObserver based) which sets data-tooltip/title and toggles blue-tooltip-end on truncated labels, and exposes init/update/destroy on window.blueWeb.menuItemOverflowTooltips. Import the new script in site layout. Add CSS rule to display tooltip-enabled menu items inline-flex. Update docs and examples (site public llms.txt, search-index.json, and Menu Item.mdx) to show the overflow tooltip, adjust various example class names (BLUE- → blue-), and add several UI/docs snippets (Header, .blue-label, utilities, intro changes).