[TFM Display] Added tooltip/popover for badges. (#9020)

Author: Daniel Jacinto

src/NuGetGallery/Scripts/gallery/common.js

@@ -470,7 +470,7 @@
             setTimeout(function () {
                     popoverElement.popover('destroy');
                 },
-                1000);
+                2000);
         });
     };
 

src/NuGetGallery/Scripts/gallery/page-display-package.js

@@ -186,5 +186,6 @@
     }
 
     $(".reserved-indicator").each(window.nuget.setPopovers);
+    $(".framework-badge-asset").each(window.nuget.setPopovers);
     $(".package-warning-icon").each(window.nuget.setPopovers);
 });

src/NuGetGallery/Strings.Designer.cs

@@ -1224,4 +1224,10 @@ The {1} Team</value>
   <data name="ApiKeyOwnerLocked" xml:space="preserve">
     <value>The specified API key is scoped to an owner that is locked. Please contact [email protected].</value>
   </data>
+  <data name="SupportedFrameworks_EmptyVersionTooltip" xml:space="preserve">
+    <value>This package is compatible with all versions of this framework.</value>
+  </data>
+  <data name="SupportedFrameworks_Tooltip" xml:space="preserve">
+    <value>This package is compatible with this framework or higher.</value>
+  </data>
 </root>

src/NuGetGallery/Strings.resx

@@ -1,21 +1,44 @@
-@using NuGetGallery.Frameworks;
+@using String = NuGetGallery.Strings;
+@using NuGetGallery.Frameworks;
 @model PackageFrameworkCompatibilityBadges
 
 <div class="framework framework-badges">
     @if (Model.Net != null)
     {
-        <span class="framework-badge-asset" tabindex="0">.NET @Model.Net.GetBadgeVersion()</span>
+        <!-- .NET cannot be an empty version since the lowest version for this framework is "net5.0", if the package contains just "net" framework it will fall into .NET Framework badge instead.' -->
+        <span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_Tooltip">.NET @Model.Net.GetBadgeVersion()</span>
     }
     @if (Model.NetCore != null)
     {
-        <span class="framework-badge-asset" tabindex="0">.NET Core @Model.NetCore.GetBadgeVersion()</span>
+        if (Model.NetCore.GetBadgeVersion().IsEmpty())
+        {
+            <span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_EmptyVersionTooltip">.NET Core</span>
+        }
+        else
+        {
+            <span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_Tooltip">.NET Core @Model.NetCore.GetBadgeVersion()</span>
+        }
     }
     @if (Model.NetStandard != null)
     {
-        <span class="framework-badge-asset" tabindex="0">.NET Standard @Model.NetStandard.GetBadgeVersion()</span>
+        if (Model.NetStandard.GetBadgeVersion().IsEmpty())
+        {
+            <span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_EmptyVersionTooltip">.NET Standard</span>
+        }
+        else
+        {
+            <span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_Tooltip">.NET Standard @Model.NetStandard.GetBadgeVersion()</span>
+        }
     }
     @if (Model.NetFramework != null)
     {
-        <span class="framework-badge-asset" tabindex="0">.NET Framework @Model.NetFramework.GetBadgeVersion()</span>
+        if (Model.NetFramework.GetBadgeVersion().IsEmpty())
+        {
+            <span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_EmptyVersionTooltip">.NET Framework</span>
+        }
+        else
+        {
+            <span class="framework-badge-asset" role="button" tabindex="0" data-content="@String.SupportedFrameworks_Tooltip">.NET Framework @Model.NetFramework.GetBadgeVersion()</span>
+        }
     }
 </div>