Style tooltip

Bold heading and separator

Author: reakaleek

src/Elastic.Documentation.Site/Assets/markdown/applies-to.css

@@ -46,3 +46,22 @@
 		}
 	}
 }
+
+.tippy-box[data-theme~='applies-to'] {
+	/*background-color: tomato;*/
+	/*color: yellow;*/
+	.tippy-content {
+		white-space: normal;
+		
+		strong {
+			display: block;
+			margin-bottom: calc(var(--spacing) * 1);
+		}
+	}
+	
+	.tippy-content > div:not(:last-child) {
+		border-bottom: 1px dotted var(--color-grey-50);
+		padding-bottom: calc(var(--spacing) * 3);
+		margin-bottom: calc(var(--spacing) * 3);
+	}
+}

src/Elastic.Documentation.Site/Assets/markdown/applies-to.ts

@@ -1,14 +1,39 @@
 import tippy from 'tippy.js'
+import { $$ } from 'select-dom'
 
 document.addEventListener('htmx:load', function () {
-    tippy(
-        [
-            '.applies [data-tippy-content]:not([data-tippy-content=""])',
-            '.applies-inline [data-tippy-content]:not([data-tippy-content=""])',
-        ].join(', '),
-        {
-            delay: [400, 100],
-            hideOnClick: false,
-        }
-    )
+    
+    const selector = [
+        '.applies [data-tippy-content]:not([data-tippy-content=""])',
+        '.applies-inline [data-tippy-content]:not([data-tippy-content=""])',
+    ].join(', ')
+    
+    const appliesToBadgesWithTooltip = $$(selector)
+    appliesToBadgesWithTooltip.forEach(badge => {
+        const content = badge.getAttribute('data-tippy-content')
+        if (!content) 
+            return
+        tippy(
+            badge,
+            {
+                content,
+                allowHTML: true,
+                delay: [400, 100],
+                hideOnClick: false,
+                ignoreAttributes: true,
+                theme: 'applies-to'
+            }
+        )
+    })
+    
+    // tippy(
+    //     [
+    //         '.applies [data-tippy-content]:not([data-tippy-content=""])',
+    //         '.applies-inline [data-tippy-content]:not([data-tippy-content=""])',
+    //     ].join(', '),
+    //     {
+    //         delay: [400, 100],
+    //         hideOnClick: false,
+    //     }
+    // )
 })

src/Elastic.Markdown/Myst/Components/ApplicabilityRenderer.cs

@@ -73,15 +73,17 @@ private static string BuildCombinedTooltipText(
 		var orderedApplicabilities = applicabilities
 			.OrderByDescending(a => a.Version is null || a.Version is AllVersions || a.Version <= versioningSystem.Current ? 1 : 0)
 			.ThenByDescending(a => a.Version ?? new SemVersion(0, 0, 0))
-			.ThenBy(a => a.Version ?? new SemVersion(0, 0, 0));
+			.ThenBy(a => a.Version ?? new SemVersion(0, 0, 0))
+			.ToList();
 
 		foreach (var applicability in orderedApplicabilities)
 		{
 			var realVersion = TryGetRealVersion(applicability, out var v) ? v : null;
 			var lifecycleFull = GetLifecycleFullText(applicability.Lifecycle);
 			var heading = CreateApplicabilityHeading(applicability, applicabilityDefinition, realVersion);
 			var tooltipText = BuildTooltipText(applicability, applicabilityDefinition, versioningSystem, realVersion, lifecycleFull);
-			tooltipParts.Add($"{heading}\n{tooltipText}");
+			// language=html
+			tooltipParts.Add($"<div>{heading}{tooltipText}</div>");
 		}
 
 		return string.Join("\n\n", tooltipParts);
@@ -91,7 +93,8 @@ private static string CreateApplicabilityHeading(Applicability applicability, Ap
 	{
 		var lifecycleName = applicability.GetLifeCycleName();
 		var versionText = realVersion is not null ? $" {realVersion}" : "";
-		return $"{applicabilityDefinition.DisplayName} {lifecycleName}{versionText}:";
+		// language=html
+		return $"""<strong>{applicabilityDefinition.DisplayName} {lifecycleName}{versionText}:</strong>""";
 	}
 
 	private static string GetLifecycleFullText(ProductLifecycle lifecycle) => lifecycle switch