Validation tooltip component

.gitignore

@@ -365,3 +365,6 @@ FodyWeavers.xsd
 /SiemensIXBlazor.TestApp
 /SiemensIXBlazorTestApp
 /TestBlazorApp
+
+# Ignore webpack generated static js files
+/SiemensIXBlazor/wwwroot/js/siemens-ix/*index.bundle.js*

README.md

@@ -8,18 +8,18 @@ SPDX-License-Identifier: MIT
 
 ## Installation
 
-Install the `SiemensIXBlazor` package from the [NuGet](https://www.nuget.org/packages/Siemens.IX.Blazor) package manager.
+Install the `Siemens.IX.Blazor` package from the [NuGet](https://www.nuget.org/packages/Siemens.IX.Blazor) package manager.
 
 ## .NET CLI
 
 ```cmd
-dotnet add package SiemensIXBlazor
+dotnet add package Siemens.IX.Blazor
 ```
 
 ## Package Manager
 
 ```cmd
-NuGet\Install-Package SiemensIXBlazor
+NuGet\Install-Package Siemens.IX.Blazor
 ```
 
 Add required `CSS` and `Javascript` packages into the `index.html` file.
@@ -1272,6 +1272,18 @@ toast.ShowToast("test message", "info");
 </div>
 ```
 
+## Validation Tooltip
+
+```razor
+<form class="needs-validation" novalidate @onsubmit="()=>{}">
+	<ValidationTooltip Message="Cannot be empty!" Placement="ValidationTooltipPlacement.Top">
+		<label for="validationCustom01">Name</label>
+		<input id="validationCustom01" value="" required />
+	</ValidationTooltip>
+	<Button Type="ButtonType.Submit">Submit </Button>
+</form>
+```
+
 ## Tree
 
 ```razor

SiemensIXBlazor.Tests/SiemensIXBlazor.Tests.csproj

@@ -18,7 +18,7 @@
     <PackageReference Include="Microsoft.NET.Test.Sdk" Version="17.11.1" />
     <PackageReference Include="Moq" Version="4.20.72" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
-    <PackageReference Include="xunit" Version="2.9.1" />
+    <PackageReference Include="xunit" Version="2.9.2" />
     <PackageReference Include="xunit.runner.visualstudio" Version="2.8.2">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>

SiemensIXBlazor.Tests/ValidationTooltipTest.cs

@@ -0,0 +1,66 @@
+// -----------------------------------------------------------------------
+// SPDX-FileCopyrightText: 2024 Siemens AG
+//
+// SPDX-License-Identifier: MIT
+//
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+//  -----------------------------------------------------------------------
+
+using Bunit;
+using SiemensIXBlazor.Components;
+using SiemensIXBlazor.Enums.ValidationTooltip;
+
+namespace SiemensIXBlazor.Tests;
+public class ValidationTooltipTests : TestContextBase
+{
+	[Fact]
+	public void ValidationTooltipRendersCorrectly()
+	{
+		// Arrange
+		string id = "test-id";
+		string style = "color: red;";
+		string cssClass = "test-class";
+		string message = "Test message";
+		string childContent = "Test content";
+		bool suppressAutomaticPlacement = true;
+		ValidationTooltipPlacement placement = ValidationTooltipPlacement.Top;
+
+		// Act
+		var cut = RenderComponent<ValidationTooltip>(parameters => parameters
+				.Add(p => p.Id, id)
+				.Add(p => p.Style, style)
+				.Add(p => p.Class, cssClass)
+				.Add(p => p.Message, message)
+				.Add(p => p.SuppressAutomaticPlacement, suppressAutomaticPlacement)
+				.Add(p => p.Placement, placement)
+				.Add(p => p.ChildContent, childContent)
+			);
+
+		// Assert
+		cut.MarkupMatches($@"
+					<ix-validation-tooltip id=""{id}"" style=""{style}"" class=""{cssClass}"" message=""{message}"" suppress-automatic-placement placement=""top"">
+						{childContent}
+					</ix-validation-tooltip>
+				");
+	}
+
+	[Fact]
+	public void ValidationTooltipComplexChildContentRendersCorrectly()
+	{
+		// Arrange
+		string childContent = $@"<label for=""validationCustom01"">Example input</label><input id=""validationCustom01"" value="""" required minlength=""4"" />";
+
+		// Act
+		var cut = RenderComponent<ValidationTooltip>(parameters => parameters
+			.AddChildContent(childContent)
+		);
+
+		// Assert
+		cut.MarkupMatches($@"
+					<ix-validation-tooltip placement=""top"">
+						{childContent}
+					</ix-validation-tooltip>
+				");
+	}
+}

SiemensIXBlazor/Components/ValidationTooltip/ValidationTooltip.razor

@@ -0,0 +1,26 @@
+@* -----------------------------------------------------------------------
+// SPDX-FileCopyrightText: 2024 Siemens AG
+//
+// SPDX-License-Identifier: MIT
+//
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+//  -----------------------------------------------------------------------
+*@
+
+@using Microsoft.JSInterop;
+@using SiemensIXBlazor.Enums.ValidationTooltip
+@using SiemensIXBlazor.Helpers;
+@inject IJSRuntime JSRuntime
+@namespace SiemensIXBlazor.Components
+@inherits IXBaseComponent
+
+<ix-validation-tooltip @attributes="UserAttributes"
+					   id="@Id"
+					   style="@Style"
+					   class="@Class"
+					   message="@Message"
+					   suppress-automatic-placement="@SuppressAutomaticPlacement"
+					   placement="@(EnumParser<ValidationTooltipPlacement>.EnumToString(Placement))">
+	@ChildContent
+</ix-validation-tooltip>

SiemensIXBlazor/Components/ValidationTooltip/ValidationTooltip.razor.cs

@@ -0,0 +1,26 @@
+// -----------------------------------------------------------------------
+// SPDX-FileCopyrightText: 2024 Siemens AG
+//
+// SPDX-License-Identifier: MIT
+//
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+//  -----------------------------------------------------------------------
+
+using Microsoft.AspNetCore.Components;
+using SiemensIXBlazor.Enums.ValidationTooltip;
+namespace SiemensIXBlazor.Components;
+
+public partial class ValidationTooltip
+{
+	[Parameter]
+	public string? Id { get; set; }
+	[Parameter]
+	public string? Message { get; set; }
+	[Parameter]
+	public ValidationTooltipPlacement Placement { get; set; } = ValidationTooltipPlacement.Top;
+	[Parameter]
+	public bool SuppressAutomaticPlacement { get; set; } = false;
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+}

SiemensIXBlazor/Enums/ValidationTooltip/ValidationTooltipPlacement.cs

@@ -0,0 +1,18 @@
+// -----------------------------------------------------------------------
+// SPDX-FileCopyrightText: 2024 Siemens AG
+//
+// SPDX-License-Identifier: MIT
+//
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+//  -----------------------------------------------------------------------
+
+namespace SiemensIXBlazor.Enums.ValidationTooltip;
+
+public enum ValidationTooltipPlacement
+{
+	Bottom,
+	Left,
+	Right,
+	Top
+}