diff --git a/source/helpers/related-issues-count.svelte b/source/helpers/related-issues-count.svelte index d5dcbbae103b..33f0d214a963 100644 --- a/source/helpers/related-issues-count.svelte +++ b/source/helpers/related-issues-count.svelte @@ -3,6 +3,7 @@ import pluralize from './pluralize.js'; import getOpenRelatedIssuesCount from './related-issues-count.js'; import {getFeatureRelatedIssuesUrl} from './rgh-links.js'; + import addToolTip from './tooltip.js'; type Labels = { single: string; @@ -23,17 +24,46 @@ getFeatureRelatedIssuesUrl(featureId).href ); const countPromise = $derived.by(() => getOpenRelatedIssuesCount(featureId)); + + function tooltipAction(node: globalThis.HTMLElement, content?: string) { + let tooltip: globalThis.HTMLElement | undefined; + + const apply = (value?: string): void => { + tooltip?.remove(); + tooltip = undefined; + if (!value) { + return; + } + + addToolTip(value, node); + const tooltipId = node.getAttribute('aria-labelledby'); + const potentialTooltip = tooltipId && globalThis.document.querySelector(`#${tooltipId}`); + if (potentialTooltip?.matches('tool-tip')) { + tooltip = potentialTooltip; + } + }; + + apply(content); + + return { + update: apply, + destroy() { + tooltip?.remove(); + }, + }; + } -{#snippet linked(text: string)} +{#snippet linked(text: string, openIssuesTooltip?: string)} {#if linkify} {text} {:else} - {text} + {text} {/if} {/snippet} @@ -43,6 +73,8 @@ {/if} {:then count} {#if count > 0 || labels.zero !== undefined} - {@render linked(pluralize(count, labels.single, labels.plural, labels.zero))} + {@const label = pluralize(count, labels.single, labels.plural, labels.zero)} + {@const openIssuesTooltip = pluralize(count, '1 open issue', '$$ open issues', 'No open issues')} + {@render linked(label, openIssuesTooltip)} {/if} {/await}