Tooltip Blazor Integration

README.md

@@ -103,5 +103,5 @@ NOTE: To update the component status:
 | Text Field - Single | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/842889a5-67ba-4350-91c1-55eee48f4fa2/) | | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/text-field--text-field) | :white_check_mark: | :white_check_mark: |
 | Toggle Icon Button | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/d022d8af-22f4-4bf2-981c-1dc0c61afece/) | | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/story/toggle-button--icon-button) | :white_check_mark: | :white_check_mark: |
 | Toolbar | |  [Issue](https://github.com/ni/nimble/issues/411) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/story/toolbar--toolbar) | :white_check_mark: | :white_check_mark: |
-| Tooltip | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/044414d7-1714-40f2-9679-2ce2c8202d1c/) |  [Issue](https://github.com/ni/nimble/issues/309) | :o: | :o: | :o: |
+| Tooltip | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/044414d7-1714-40f2-9679-2ce2c8202d1c/) |  [Issue](https://github.com/ni/nimble/issues/309) | [:arrows_counterclockwise: - SB](https://ni.github.io/nimble/storybook/?path=/story/tooltip--tooltip) | :white_check_mark: | :white_check_mark: |
 | Tree View | | | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/tree-view--tree-view) | :white_check_mark: | :white_check_mark: |

change/@ni-nimble-blazor-11eb6102-5ca6-444a-ab23-30353c9b14bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Nimble Tooltip Blazor Integration (#309)",
+  "packageName": "@ni/nimble-blazor",
+  "email": "103057880+aidendk@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-blazor/CodeAnalysisDictionary.xml

@@ -14,6 +14,7 @@
             <Word>lang</Word>
             <Word>frameless</Word>
             <Word>Dropdown</Word>
+            <Word>Tooltip</Word>
         </Recognized>
         <DiscreteExceptions>
         </DiscreteExceptions>

packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor

@@ -174,6 +174,19 @@
                     <NimbleButton slot="end" Appearance="ButtonAppearance.Outline">Last Button</NimbleButton>
                 </NimbleToolbar>
             </div>
+            <div class="sub-container">
+                <div class="container-label">Tooltip</div>
+                <NimbleButton id="anchor1">Default</NimbleButton>
+                <NimbleTooltip Anchor="anchor1">Tooltip label</NimbleTooltip>
+                <NimbleButton id="anchor2">Fail</NimbleButton>
+                <NimbleTooltip Anchor="anchor2" class="fail">Tooltip label</NimbleTooltip>
+                <NimbleButton id="anchor3">Information</NimbleButton>
+                <NimbleTooltip Anchor="anchor3" class="information">Tooltip label</NimbleTooltip>
+                <NimbleButton id="anchor4">Fail Icon</NimbleButton>
+                <NimbleTooltip Anchor="anchor4" class="fail icon-visible">Tooltip label</NimbleTooltip>
+                <NimbleButton id="anchor5">Information Icon</NimbleButton>
+                <NimbleTooltip Anchor="anchor5" class="information icon-visible">Tooltip label</NimbleTooltip>
+            </div>
             <div class="sub-container">
                 <div class="container-label">Tree View</div>
                 <NimbleTreeView>

packages/nimble-blazor/NimbleBlazor/Components/NimbleTooltip.razor

@@ -0,0 +1,2 @@
+@namespace NimbleBlazor
+<nimble-tooltip anchor="@Anchor" delay="@Delay" @attributes="AdditionalAttributes">@ChildContent</nimble-tooltip>

packages/nimble-blazor/NimbleBlazor/Components/NimbleTooltip.razor.cs

@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components;
+
+namespace NimbleBlazor;
+
+public partial class NimbleTooltip : ComponentBase
+{
+    [Parameter]
+    public string? Anchor { get; set; }
+
+    [Parameter]
+    public int? Delay { get; set; }
+
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public IDictionary<string, object>? AdditionalAttributes { get; set; }
+}

packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTooltipTests.cs

@@ -0,0 +1,22 @@
+using Bunit;
+using Xunit;
+
+namespace NimbleBlazor.Tests.Unit.Components;
+
+/// <summary>
+/// Tests for <see cref="NimbleTooltip"/>.
+/// </summary>
+public class NimbleTooltipTests
+{
+    [Fact]
+    public void NimbleTooltip_Render_HasTooltipMarkup()
+    {
+        var context = new TestContext();
+        context.JSInterop.Mode = JSRuntimeMode.Loose;
+        var expectedMarkup = "nimble-tooltip";
+
+        var tooltip = context.RenderComponent<NimbleTooltip>();
+
+        Assert.Contains(expectedMarkup, tooltip.Markup);
+    }
+}