diff --git a/BlazorBootstrap.Demo.RCL/Pages/Tooltips/TooltipsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Tooltips/TooltipsDocumentation.razor
index b93af9b7b..3c7465499 100644
--- a/BlazorBootstrap.Demo.RCL/Pages/Tooltips/TooltipsDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Pages/Tooltips/TooltipsDocumentation.razor
@@ -38,6 +38,9 @@
+
+
+
@code {
private string pageUrl = "/tooltips";
private string title = "Blazor Tooltip Component";
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Tooltips/Tooltips_Demo_08_HTML.razor b/BlazorBootstrap.Demo.RCL/Pages/Tooltips/Tooltips_Demo_08_HTML.razor
new file mode 100644
index 000000000..2d205b744
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Pages/Tooltips/Tooltips_Demo_08_HTML.razor
@@ -0,0 +1 @@
+Tooltip with HTML
diff --git a/blazorbootstrap/Components/Tooltip/Tooltip.razor b/blazorbootstrap/Components/Tooltip/Tooltip.razor
index cd2645cab..884ed1a54 100644
--- a/blazorbootstrap/Components/Tooltip/Tooltip.razor
+++ b/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
-
+
\ No newline at end of file
diff --git a/blazorbootstrap/Components/Tooltip/Tooltip.razor.cs b/blazorbootstrap/Components/Tooltip/Tooltip.razor.cs
index 6621c6df8..090c1e999 100644
--- a/blazorbootstrap/Components/Tooltip/Tooltip.razor.cs
+++ b/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)!;
+
+ ///
+ /// Gets or sets a value indicating whether to display the content as HTML instead of text.
+ ///
+ [Parameter]
+ public bool IsHtml { get; set; }
+
private string placement => Placement.ToTooltipPlacementName();
///
diff --git a/docs/docs/05-components/tooltips.mdx b/docs/docs/05-components/tooltips.mdx
index c11fad7d0..a9ee2bffe 100644
--- a/docs/docs/05-components/tooltips.mdx
+++ b/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)
\ No newline at end of file
+[see demo here](https://demos.blazorbootstrap.com/tooltips#dynamically-update-the-tooltip-text)
+
+### Tooltip with HTML
+
+
+
+```cshtml {} showLineNumbers
+Tooltip with HTML
+```
+[see demo here](https://demos.blazorbootstrap.com/tooltips#tooltip-with-html)