Add HTML Tooltips

BlazorBootstrap.Demo.RCL/Pages/Tooltips/TooltipsDocumentation.razor

@@ -38,6 +38,9 @@
 <SectionHeading Size="HeadingSize.H2" Text="Dynamically change the tooltip color" PageUrl="@pageUrl" HashTagName="dynamically-change-the-tooltip-color" />
 <Demo Type="typeof(Tooltips_Demo_07_Dynamically_Change_Color)" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Tooltip with HTML" PageUrl="@pageUrl" HashTagName="tooltip-with-html" />
+<Demo Type="typeof(Tooltips_Demo_08_HTML)" />
+
 @code {
     private string pageUrl = "/tooltips";
     private string title = "Blazor Tooltip Component";

BlazorBootstrap.Demo.RCL/Pages/Tooltips/Tooltips_Demo_08_HTML.razor

@@ -0,0 +1 @@
+<Tooltip Class="me-4" Title="<strong>Tooltip</strong> <em>with</em> <u>HTML</u>" IsHtml="true">Tooltip with HTML</Tooltip>

blazorbootstrap/Components/Tooltip/Tooltip.razor

@@ -9,6 +9,7 @@
       data-bs-toggle="tooltip"
       data-bs-placement="@placement"
       data-bs-custom-class="@colorClass"
+      data-bs-html="@(IsHtml ? "true" : "false")"
       title="@Title">
     @ChildContent
-</span>
+</span>

blazorbootstrap/Components/Tooltip/Tooltip.razor.cs

@@ -87,6 +87,13 @@ public async Task ShowAsync()
     [Parameter] public TooltipColor Color { get; set; }
 
     private string colorClass => BootstrapClassProvider.TooltipColor(Color)!;
+
+    /// <summary>
+    /// Gets or sets a value indicating whether to display the content as HTML instead of text.
+    /// </summary>
+    [Parameter]
+    public bool IsHtml { get; set; }
+
     private string placement => Placement.ToTooltipPlacementName();
 
     /// <summary>

docs/docs/05-components/tooltips.mdx

@@ -21,6 +21,7 @@ Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages.
 |--|--|--|--|--|--|
 | ChildContent | RenderFragment | Specifies the content to be rendered inside this. | | | 1.0.0 |
 | Color | `TooltipColor` | Gets or sets the tooltip color. | | `TooltipColor.None` | 1.10.0 |
+| IsHtml | bool | Gets or sets a value indicating whether to display the content as HTML instead of text. | | `false` | 2.1.0 |
 | Placement | `TooltipPlacement` | Specifies the tooltip placement. Default is top right. | | `TooltipPlacement.Top` | 1.0.0 |
 | Title | string | Displays informative text when users hover, focus, or tap an element. | ✔️ | | 1.0.0 |
 
@@ -106,4 +107,13 @@ Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages.
     private void ChangeTooltip() => text = $"Updated {DateTime.Now.ToLongTimeString()}";
 }
 ```
-[see demo here](https://demos.blazorbootstrap.com/tooltips#dynamically-update-the-tooltip-text)
+[see demo here](https://demos.blazorbootstrap.com/tooltips#dynamically-update-the-tooltip-text)
+
+### Tooltip with HTML
+
+<img src="https://i.imgur.com/2xuTx6b.png" alt="Blazor Bootstrap: Tooltip with HTML" />
+
+```cshtml {} showLineNumbers
+<Tooltip Class="me-4" Title="<strong>Tooltip</strong> <em>with</em> <u>HTML</u>" IsHtml="true">Tooltip with HTML</Tooltip>
+```
+[see demo here](https://demos.blazorbootstrap.com/tooltips#tooltip-with-html)